跳到主要内容

Props 参考

Select

组件是可辨识联合:省略/falsemultipleSinglePropstrueMultiProps。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_HEIGHTOPTION_OVERSCANcomputeVirtualOptionRangeoptionListSignature(来自 select-virtual
  • computeMobileSheetLayout(来自 select-layout