Popselect 弹出选择
Popselect 从触发元素弹出一个选项菜单:单选时选完就关,multiple 时可以选多个。它是装着选项列表的 Popover,这个列表之后 Select 也会共用。
演示
基础用法
默认悬停时在触发元素下方弹出;trigger="click" 改为点击打开,并把焦点移到列表里。禁用的选项会被跳过。
多选和分组
multiple 时菜单保持打开,每个选项点一下切换选中,值是数组。选项可以用 { type: "group", label, key, children } 分组。
长列表、底部和空状态
选项很多时可以滚动(用 ScrollArea 的滚动条),键盘移动时当前项会保持在视野里。header 和 footer 在列表上下加一行;没有选项时显示空状态文字。
键盘
焦点在列表里时:↑ / ↓ 移动当前项(跳过禁用项,到头会循环),Home / End 跳到两头,Enter 或空格选中,输入字母跳到下一个以它开头的选项,Esc 关闭。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
options | PopselectMixedOption[] | 必填 | 选项 { label, value, disabled? },可以分组。 | 未发布 |
value | PopselectValue | PopselectValue[] | null | undefined | 受控的值;multiple 时是数组。 | 未发布 |
defaultValue | PopselectValue | PopselectValue[] | null | null | 非受控时的初始值。 | 未发布 |
onUpdateValue | (value, option) => void | undefined | 值变化时调用,带上被选中的选项。 | 未发布 |
multiple | boolean | false | 多选;菜单保持打开。 | 未发布 |
size | small | medium | large | medium | 行高和字号。 | 未发布 |
renderLabel | (option, selected) => ReactNode | undefined | 自定义选项的文字。 | 未发布 |
header | ReactNode | undefined | 选项上方的一行。 | 未发布 |
footer | ReactNode | undefined | 选项下方的一行。 | 未发布 |
empty | ReactNode | 语言包里的「暂无数据」 | 没有选项时显示的内容。 | 未发布 |
另外接受除 content 之外的全部 Popover 属性;trigger 默认 hover,placement 默认 bottom,showArrow 默认 false。