Radius

The listbox is a component that renders a list of items. It can be used to render a list of text, media or complex objects. The default shape is rounded.

Default props of all <BaseListbox> can be set in your <app>/app.config.ts.
نمایش کد
vue

Size

The listbox is a component that renders a list of items. It can be used to render a list of text, media or complex objects. The default size is md.

نمایش کد
vue

Contrast:default+

The listbox can be rendered in different contrast modes. The default contrast mode is default. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.

نمایش کد
vue

Contrast:muted

The listbox can be rendered in different contrast modes. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.

نمایش کد
vue

Contrast:muted+

The listbox can be rendered in different contrast modes. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.

نمایش کد
vue

Error

The listbox can be shown in an error state using the error prop. You can also set a custom error message using the same prop.

این فیلد ضروری است
این فیلد ضروری است
این فیلد ضروری است
نمایش کد
vue

Disabled

Listbox can be shown in a disabled state using the disabled prop.

نمایش کد
vue

Loading

Listbox can be shown in a loading state using the loading prop.

نمایش کد
vue

Label:float

Listbox can have a material design style floating label using the labelFloat prop.

نمایش کد
vue

Listbox items can have a sublabel using the sublabel prop of the properties object.

نمایش کد
vue

Listbox with icon

Listbox items can have an icon using the icon prop of the properties object.

نمایش کد
vue

Listbox with media

Listbox items can have a media using the media prop of the properties object.

نمایش کد
vue

Multiple selection

Listbox can be used to select multiple items using the multiple prop.

نمایش کد
vue
v-model
نمایش مثال
vue
items
The items to display in the multiselect.
ضروری
نمایش مثال
vue
classes
Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
نمایش مثال
vue
color-focus
Wether the border should change color when focused
نمایش مثال
vue
disabled
Whether the multiselect is disabled.
نمایش مثال
vue
error
An error message or boolean value indicating whether the input is in an error state.
نمایش مثال
vue
fixed
Used a fixed strategy to float the component
نمایش مثال
vue
icon
The icon to display for the multiselect.
نمایش مثال
vue
label
The label to display for the multiselect.
نمایش مثال
vue
label-float
If the label should be floating.
نمایش مثال
vue
loading
Whether the multiselect is in a loading state.
نمایش مثال
vue
multiple
Whether the multiselect allows multiple selections.
نمایش مثال
vue
multiple-label
The label to display for multiple selections, or a function that returns the label.
نمایش مثال
vue
placeholder
The placeholder text to display when no selection has been made.
نمایش مثال
vue
properties
The properties to use for the value, label, sublabel, media, and icon of the options items.
نمایش مثال
vue
selected-icon
The icon to show when the component is selected.
نمایش مثال
vue
rounded
The radius of the multiselect.

@since

2.0.0

نمایش مثال
vue
placement
The placement of the component via floating-ui.
نمایش مثال
vue
contrast
The contrast of the listbox.
نمایش مثال
vue
size
The size of the listbox.
نمایش مثال
vue
#label
نمایش مثال
vue
#icon
نمایش مثال
vue
#listbox-button
نمایش مثال
vue
#listbox-item
نمایش مثال
vue
active
Whether the item is focus/hover or not.
نمایش مثال
vue
selected
Whether the item is selected or not.
نمایش مثال
vue
selected-icon
The icon to show when the component is selected.
نمایش مثال
vue
value
The values to display in the component.
نمایش مثال
vue