Select / 选择器

显示下拉列表选框。

对话框组件包含额外的 Hooks，详情请参阅 useModal 小节。

基础的

禁用

禁用所有的交互。

禁用选项

禁用指定的选项。

无图标

隐藏选择器右侧的图标。

类型

以色彩展示不同状态。

标签

用标签将选项分组。

分割线

在选项中加入修饰用的线条。

多选

Select 组件支持同时选中多个值。

无移除图标的多选

Select 支持不携带移除图标的多选控件。

组合

与其他组件组合使用。

超出宽度

Option 可以自适应宽度以展示更多文本。

设置渲染容器

你可以指定下拉框的元素渲染的容器。

APIs / 接口文档

Select.Props

属性描述类型推荐值默认
value手动设置选择器的值string, string[]--
initialValue选择器初始值string, string[]--
placeholder占位文本内容string--
width组件的 CSS 宽度值string-initial
icon右侧图标组件ComponentType-SVG Component
pure隐藏右侧图标组件boolean-false
multiple是否支持多选boolean-false
clearable多选时是否展示移除图标boolean-true
disabled禁用所有的交互boolean-false
onChange选项被选中所触发的事件(val: string | string[]) => void --
dropdownClassName下拉框的自定义类名string--
dropdownStyle下拉框的自定义样式object--
disableMatchWidth禁止 Option 跟随单选框的宽度boolean-false
getPopupContainer下拉框渲染的父元素，默认是 body() => HTMLElement--
onDropdownVisibleChange下拉框可见性变化事件(visible: boolean) => void--
ref转发的 RefSelectRefSelectRef-
...原生属性HTMLAttributes'name', 'alt', ...-

SelectRef

type SelectRef = {
  focus: () => void
  blur: () => void
  scrollTo?: (options?: ScrollToOptions) => void
}

Select.Option.Props

属性描述类型推荐值默认
value(必须的)唯一鉴别值string--
disabled禁用当前选项boolean-false
divider显示线条boolean-false
label显示分组的标题boolean-false
...原生属性HTMLAttributes'name', 'id', 'className', ...-
Add