Select 选择框

用于弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。

何时使用

• 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

代码示例

基本使用

基本使用

多层级选择器

带图标选择器

API

SelectProps

参数	说明	类型	默认值
arrow	自定义下拉箭头	ReactNode	-
border	是否显示边框	boolean	true
options	下拉选项	Array<ItemProps>	-
placeholder	占位符	string	-
prefixIcon	是否显示前缀图标	boolean	false
onChange	选择项变化时的回调	(value: string) => void	()=>{}

SelectOptionProps

参数	说明	类型	默认值
config	配置项	OptionConfig	-
isSelectOpen	是否展开	boolean	-
level	层级	number	-
onToggle	展开/收起时的回调	React.Dispatch<React.SetStateAction<boolean>>	-
onClick	点击时的回调	(e: React.MouseEvent, value: string, label: string) => void	-

interface OptionConfig {
  width: number;
  left: number;
  bottom: number;
  height: number;
}

SubItemProps

参数	说明	类型	默认值
label	标签	string	-
options	选项	Array<ItemProps>	-
prefixIcon	前缀图标	ReactNode	-

ItemProps

参数	说明	类型	默认值
arrow	箭头图标	ReactNode	-
label	标签	string	-
options	选项	Array<ItemProps>	-
prefixIcon	前缀图标	ReactNode	-
value	值	string	-
onClick	点击时的回调	(e: React.MouseEvent, value: string, label: string) => void	-
onMouseEnter	鼠标移入时的回调	MouseEventHandler	-
onMouseLeave	鼠标移出时的回调	MouseEventHandler	-