TagPicker 标签选择器 #

以标签的方式进行多选，同时支持新增选项

获取组件 #

演示 #

默认 #

尺寸 #

支持 lg、md、sm 和 xs 四种尺寸。

撑满 #

设置 block 属性可以让选择器撑满其父容器。

分组 #

通过 groupBy 属性对选项进行分组显示。

可新建 #

设置 creatable 属性可以创建新的选项。

自定义 #

通过 renderValue、renderOption 等属性可以自定义标签和选项的渲染。

禁用与只读 #

支持 disabled 禁用整个选择器，readOnly 只读状态，以及 disabledItemValues 禁用特定选项。

异步加载 #

通过 onSearch 回调实现异步搜索和加载选项。

响应式 #

默认仅在 searchable={false} 时，弹出层会在超小屏幕上转换为全宽 Drawer。设置 responsive 可强制启用支持搜索的 Drawer；设置 responsive={false} 则始终保持定位浮层。

可访问性 #

ARIA 属性 #

• 当 Picker 渲染可编辑输入框时，该输入框的 role 为 combobox，id、tabIndex 和 ARIA 属性应用于输入框；Picker handle 仍指向切换区域。设置 searchable={false} 时，切换区域为 combobox。
• 使用方向键切换选项时，DOM 焦点保留在输入框，允许继续输入；aria-activedescendant 指向当前已渲染的高亮选项。
• 使用响应式弹窗时，外部触发器的 aria-haspopup 为 dialog，弹窗内的搜索输入框控制列表框。
• 有 aria-haspopup="listbox" 属性来指示 combobox 有一个弹出的列表框。
• 有 aria-expanded 属性来指示列表框是否打开。
• 有 aria-controls 属性来指示列表框元素的 ID。
• 有 aria-activedescendant 属性来指示焦点选项的 ID。
• 当设置了 label, aria-labelledby 属性被添加到 combobox 元素和 listbox 元素上，并将值设置为 label 的 id 属性值。
• listbox 有 aria-multiselectable=true 属性来指示列表框是多选的。

键盘交互 #

• ↓ - 高亮下一个选项。
• ↑ - 高亮上一个选项。
• Enter - 选择焦点选项。
• Esc - 关闭列表框。
• Tab - 关闭列表框并移动到下一个控件。输入框中的 Home、End 和左右方向键保留文本编辑行为。

Props #

<TagPicker> #

Option #

interface Option<V> {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: V;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: ReactNode;

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: Option<V>[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}

Placement #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

ListProps #

interface ListProps {
  /**
   * Size of a item in the direction being windowed.
   */
  itemSize?: number | ((index: number) => number);

  /**
   * Scroll offset for initial render.
   */
  initialScrollOffset?: number;

  /**
   * Called when the items rendered by the list change.
   */
  onItemsRendered?: (props: ListOnItemsRenderedProps) => void;

  /**
   * Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.
   */
  onScroll?: (props: ListOnScrollProps) => void;
}