Select

Usage

import { Select } from '@apitable/components';
Copy

Scenes

A drop-down menu pops up for the user to choose.

Examples

Select action callback

Placeholder

Custom width

In some cases, dropdown list needs to be customized according to the length of the content. If so, you can set the dropdownMatchSelectWidth property to false (with a maximum width limit):

Option with icon

Each option can set its own pre-icon and suffix-icon, the Icon is imported from the @apitable/icons library.

When the selected option has an icon, the icon will be displayed by default.

Note that the trigger itself can also specify the pre-Icon and suffix-Icon. When the selected result also has the corresponding Icon passed in, the Icon specified by the trigger will be higher than the Icon weight of the option.

Option dosabled

When an option cannot be selected, the disabled state can be set for the option, and a reason for not being selected can be provided. When the mouse hovers over the content area, the reason will be displayed.

When an option is too long and the content is not displayed completely, an ellipsis will appear. At this time, hovering over the option will display the complete content of the current option. If the option is disabled at this moment, the weight of disabledTip will be higher than the content.

Set disabled tips:

The suffix-icon of an option is special. When an option is in the disabled state, the pre-icon and the text part will turn gray, but the post-icon will keep the original color. And the rear Icon can also have its own hover.

Status prompt, just pass the content in suffixIconTip.

Select disbaled

Search option and hightligh keyword

The search is case insensitive in English.

Update hightligh keyword style

Format Selected option

Get option user name by renderValue function:

Select.Option

Instead of using the options props, you can add options through sub-elements, as follows:

API