参考
选择器 Select
Select:选择器。触发器就是整个控件,列表淡入展开为纸质浮层,选中行使用墨色平铺填充。部件:Root、Label、Control、Trigger、ValueText、Indicator、ClearTrigger、HiddenSelect、Positioner、Content、List、Item、ItemText、ItemIndicator、ItemGroup、ItemGroupLabel。
Label · Positioner · Trigger · Indicator · ClearTrigger · Item · ItemText · ItemIndicator · ItemGroup · ItemGroupLabel · List · Content · Root · Control · ValueText
#ClearTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Content
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Control
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#HiddenSelect
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Indicator
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemContext
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemGroupLabel
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemGroup
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemIndicator
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Item
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
item | T | 要渲染的选项 | |
persistFocus | boolean | undefined | 悬停移出时是否清除高亮状态 |
#Label
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#List
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Positioner
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | select 触发器的高度档位 |
autoComplete | string | 隐藏 select 的 autocomplete 属性,用于启用浏览器自动填充,例如省州字段用 address-level1 | |
closeOnSelect | boolean | true | 选中选项后是否关闭 select |
collection | ListCollection<T> | 选项集合 | |
composite | boolean | true | select 是否与 tabs、combobox 等复合组件组合使用 |
defaultHighlightedValue | string | select 打开时高亮项的初始值;不需要控制高亮值时使用 | |
defaultOpen | boolean | select 的打开状态是否受控 | |
defaultValue | string[] | select 渲染时的初始默认值;不需要控制 select 值时使用 | |
deselectable | boolean | 是否点击已选项清空值;仅单选模式适用 | |
disabled | boolean | select 是否禁用 | |
form | string | 底层 select 关联的表单 | |
highlightedValue | string | 高亮项的受控键值 | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item(id: string | number): string; itemGroup(id: string | number): string; itemGroupLabel(id: string | number): string; }> | select 各元素的 id,适合组合使用 | |
invalid | boolean | select 是否无效 | |
loopFocus | boolean | false | 键盘导航是否在选项间循环 |
modelValue | string[] | select 的模型值 | |
multiple | boolean | 是否允许多选 | |
name | string | 底层 select 的 name 属性 | |
open | boolean | select 菜单是否打开 | |
positioning | select.PositioningOptions | 菜单的定位选项 | |
readOnly | boolean | select 是否只读 | |
required | boolean | select 是否必填 | |
scrollToIndexFn | (details: select.ScrollToIndexDetails) => void | 滚动到指定索引的函数 | |
translations | select.IntlTranslations | 无障碍元素及其状态的本地化文案 |
| 事件 | 载荷 |
|---|---|
select | details: SelectionDetails |
exitComplete | — |
valueChange | details: ValueChangeDetails<T> |
update:modelValue | value: string[] |
openChange | details: OpenChangeDetails |
update:open | open: boolean |
focusOutside | event: FocusOutsideEvent |
interactOutside | event: InteractOutsideEvent |
pointerDownOutside | event: PointerDownOutsideEvent |
highlightChange | details: HighlightChangeDetails<T> |
update:highlightedValue | value: string | null |
#Trigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ValueText
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
placeholder | string | — |