Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.codenullapp.com/llms.txt

Use this file to discover all available pages before exploring further.

The Image Control is a versatile component designed to display images in your application. It supports various configurations, including custom dimensions, preview functionality, and custom styles. Below is a detailed guide on how to use and configure this control.

​
Properties

The Image Control accepts the following properties:

​
value

  • Type: string or Array<{ url: string }>
  • Description:
    • The image source. It can be a direct URL string or an array of objects containing URLs.
    • If the input is a JSON string, it will be automatically parsed to extract the image URL.
    • Example: 
      "https://example.com/image.jpg"
      or 
      "[{ \"url\": \"https://example.com/image.jpg\" }]"

​
Properties

  • Type: object
  • Description:
    • A configuration object to customize the appearance and behavior of the image.
    • Supported properties:
<table><thead><tr><th width="205">Property</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td><code>width</code></td><td><code>number</code></td><td><code>100</code></td><td>The width of the image in pixels.</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td><code>100</code></td><td>The height of the image in pixels.</td></tr><tr><td><code>preview</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Enables or disables the image preview feature (zoom in/out).</td></tr><tr><td><code>CSS Library classes</code></td><td><code>string</code></td><td><code>""</code></td><td><a href="https://tailwindcss.com/">Tailwind CSS </a>classes to customize styles.</td></tr><tr><td><code>customStyles</code></td><td><code>JSON</code></td><td><code>""</code></td><td>Native CSS classes to modify the appearance.</td></tr></tbody></table>

​
customStyles

The styleproperty allows you to modify the appearance of the image using CSS styles. These styles are passed as a JSON object.

​
Example

To add a red border and rounded corners to the image, you can configure styleas follows: 
{
    "border": "2px solid red",
    "borderRadius": "8px"
}

​
tailwindClasses

The styleproperty allows you to modify the appearance of the image using tailwind classes. More info https://tailwindcss.com/ 
"border-2 border-red-500 rounded-lg"

​
Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the ask query parameter: 
GET https://codenull.gitbook.io/dev/configurations/components/forms/fields/image-control.md?ask=<question>
The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.