TreePicker 树形选择器 #

<TreePicker> 选择器组件，树形单项选择器。

获取组件 #

演示 #

默认 #

外观 #

尺寸 #

位置 #

禁用与只读 #

禁用搜索框 #

自定义选项 #

异步 #

自定义页脚 #

可访问性 #

ARIA 属性 #

combobox

• TreePicker 组件的 role 属性为 combobox。
• 有 aria-haspopup="tree" 属性来指示 combobox 有一个弹出的树形列表框。
• 有 aria-activedescendant 属性来指示焦点选项的 ID。
• 有 aria-controls 属性来指示树形列表框元素的 ID。
• 当设置了 label, aria-labelledby 属性被添加到 combobox 元素和 tree 元素上，并将值设置为 label 的 id 属性值。

tree

• Tree 组件的 role 属性为 tree。

treeitem

• Tree 节点的 role 属性为 treeitem。
• 有 aria-expanded 属性来指示树形列表框是否打开。
• 有 aria-selected 属性来指示树节点是否被选中。
• 有 aria-level 属性来指示树节点的层级。
• 有 aria-disabled 属性来指示树节点是否被禁用。

键盘交互 #

• ↓ - 移动焦点到下一个树节点。
• ↑ - 移动焦点到上一个树节点。
• → - 展开当前树节点。
• ← - 收起当前树节点。
• Enter - 选择聚焦的树节点。
• Esc - 关闭树形列表框。

Props #

<TreePicker> #

TreeNode #

interface TreeNode {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string | number;

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

  /** The data of the child option corresponds to the `childrenKey` in the data. */
  children?: TreeNode[];
}

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

相关组件 #

• <CheckTreePicker> 选择器组件，在 TreePicker 节点上支持 Checkbox，用于多选 。
• <Tree> 用于展示一个树结构数据。
• <CheckTree> 用于展示一个树结构数据，同时支持 Checkbox 选择。