Option
<zn-option> | ZnOption
Short summary of the component’s intended use.
<zn-option></zn-option>
Examples
First Example
TODO
Second Example
TODO
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/option/option.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/option/option.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/option/option.js';
Slots
| Name | Description |
|---|---|
| (default) | The option’s label. |
prefix
|
Used to prepend an icon or similar element to the menu item. |
suffix
|
Used to append an icon or similar element to the menu item. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The option’s value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing multiple values. |
|
string
|
''
|
disabled
|
Draws the option in a disabled state, preventing selection. |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Methods
| Name | Description | Arguments |
|---|---|---|
getTextLabel() |
Returns a plain text label based on the option’s content. | - |
Learn more about methods.
Parts
| Name | Description |
|---|---|
checked-option-icon |
The checked option icon, an <zn-icon> element. |
base |
The component’s base wrapper. |
label |
The option’s label. |
prefix |
The container that wraps the prefix. |
suffix |
The container that wraps the suffix. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-example><zn-icon>