跳到正文

Popselect 弹出选择

Popselect 从触发元素弹出一个选项菜单:单选时选完就关,multiple 时可以选多个。它是装着选项列表的 Popover,这个列表之后 Select 也会共用。

演示

基础用法

默认悬停时在触发元素下方弹出;trigger="click" 改为点击打开,并把焦点移到列表里。禁用的选项会被跳过。

多选和分组

multiple 时菜单保持打开,每个选项点一下切换选中,值是数组。选项可以用 { type: "group", label, key, children } 分组。

长列表、底部和空状态

选项很多时可以滚动(用 ScrollArea 的滚动条),键盘移动时当前项会保持在视野里。header 和 footer 在列表上下加一行;没有选项时显示空状态文字。

键盘

焦点在列表里时:↑ / ↓ 移动当前项(跳过禁用项,到头会循环),Home / End 跳到两头,Enter 或空格选中,输入字母跳到下一个以它开头的选项,Esc 关闭。

Props

名称类型默认值说明版本
optionsPopselectMixedOption[]必填选项 { label, value, disabled? },可以分组。未发布
valuePopselectValue | PopselectValue[] | nullundefined受控的值;multiple 时是数组。未发布
defaultValuePopselectValue | PopselectValue[] | nullnull非受控时的初始值。未发布
onUpdateValue(value, option) => voidundefined值变化时调用,带上被选中的选项。未发布
multiplebooleanfalse多选;菜单保持打开。未发布
sizesmall | medium | largemedium行高和字号。未发布
renderLabel(option, selected) => ReactNodeundefined自定义选项的文字。未发布
headerReactNodeundefined选项上方的一行。未发布
footerReactNodeundefined选项下方的一行。未发布
emptyReactNode语言包里的「暂无数据」没有选项时显示的内容。未发布

另外接受除 content 之外的全部 Popover 属性;trigger 默认 hover,placement 默认 bottom,showArrow 默认 false。