TagPicker 标签选择器 #

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

获取组件 #

演示 #

默认 #

尺寸 #

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

撑满 #

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

分组 #

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

可新建 #

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

自定义 #

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

禁用与只读 #

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

异步加载 #

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

响应式 #

在小屏幕设备上，选择列表将被转换为弹出式选择器。 为了不影响组件的搜索功能，只有在设置 searchable={false} 时，才会生效。

可访问性 #

ARIA 属性 #

• TagPicker 组件的 role 属性为 combobox。
• 有 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 - 关闭列表框。

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;
}