跳到主要内容

Props 参考

Select​

组件是可辨识联合:省略/false 的 multiple 为 SingleProps,true 为 MultiProps。TypeScript 自动收窄 value / onValueChange。

通用 props(SelectBaseProps)​

Prop类型默认说明
optionsSelectOption[]—选项列表。
searchablebooleanmultiple ‖ options.length > 5显示搜索框。
placeholderstring—空值时触发器文字。
searchPlaceholderstring—搜索框占位符。
emptyTextstring—无结果文案。
disabledbooleanfalse禁用触发器。
mobileTitlestringplaceholdersheet 表头标题。
mobileSetLabelstring"Set"多选确认按钮 aria-label。
mobileCancelLabelstring"Cancel"取消按钮 aria-label。
mobileDoneLabelstring"Done"单选关闭按钮 aria-label。
selectedCountLabel(n: number) => string${n} selected多选 > 2 项时触发器摘要。
classNamestring—触发器额外类。
aria-labelstring—触发器无障碍标签。

单选(SingleProps)​

Prop类型
multiplefalse(可选)
valuestring
onValueChange(v: string) => void

多选(MultiProps)​

Prop类型
multipletrue
valuestring[]
onValueChange(v: string[]) => void

SelectOption​

type SelectOption = {
value: string; // 唯一键
label: string; // 行 label
description?: string; // 次要文本 + 并入 aria-label
disabled?: boolean; // 行不可切换
icon?: ReactNode | ((option: SelectOption) => ReactNode); // 左侧图标
};

导出的 helper​

纯逻辑已导出,方便想用同一套原语搭自定义 UI 的高级用户:

  • OPTION_ROW_HEIGHT、OPTION_OVERSCAN、computeVirtualOptionRange、optionListSignature(来自 select-virtual)
  • computeMobileSheetLayout(来自 select-layout)