树形选择器

查看 WordPress Storybook 以获取更详细、交互式的文档。

生成一个分层选择输入框。

import { useState } from 'react';
import { TreeSelect } from '@wordpress/components';

const MyTreeSelect = () => {
    const [ page, setPage ] = useState( 'p21' );

    return (
        <TreeSelect
            label="Parent page"
            noOptionLabel="No parent page"
            onChange={ ( newPage ) => setPage( newPage ) }
            selectedId={ page }
            tree={ [
                {
                    name: 'Page 1',
                    id: 'p1',
                    children: [
                        { name: 'Descend 1 of page 1', id: 'p11' },
                        { name: 'Descend 2 of page 1', id: 'p12' },
                    ],
                },
                {
                    name: 'Page 2',
                    id: 'p2',
                    children: [
                        {
                            name: 'Descend 1 of page 2',
                            id: 'p21',
                            children: [
                                {
                                    name: 'Descend 1 of Descend 1 of page 2',
                                    id: 'p211',
                                },
                            ],
                        },
                    ],
                },
            ] }
        />
    );
}

Props

children

• Type: ReactNode
• Required: No

作为 options 属性的替代方案，可以将 optgroups 和 options 作为 children 传入，以实现更高的自定义性。

disabled

• Type: boolean
• Required: No
• Default: false

如果为 true，则禁用 input。

hideLabelFromVision

• Type: boolean
• Required: No
• Default: false

如果为 true，该标签仅对屏幕阅读器可见。

help

• Type: ReactNode
• Required: No

控件的附加说明。

仅用于提供控件的有效描述或说明。包含描述的元素将通过 aria-describedby 属性在程序上与 BaseControl 关联。

label

• Type: ReactNode
• Required: No

如果添加此属性，将使用 label 属性作为内容生成一个标签。

labelPosition

• Type: "top" | "bottom" | "side" | "edge"
• Required: No
• Default: 'top'

标签的位置。

noOptionLabel

• Type: string
• Required: No

如果添加此属性，将添加一个带有此标签的选项，以表示空选择。

onChange

• Type: ((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement, Element>; }) => void) | undefined
• Required: No

一个接收正在选中的新选项值的函数。

options

• Type: readonly ({ label: string; value: string; } & Omit<OptionHTMLAttributes<HTMLOptionElement>, "label" | "value">)[]
• Required: No

要渲染的选项属性对象数组，
每个对象都包含 label 和 value 属性，以及任何其他
<option> 属性。

prefix

• Type: ReactNode
• Required: No

在输入框左侧渲染一个元素。

默认情况下，前缀与输入框边框的边缘对齐，没有内边距。
如果您希望应用符合尺寸变体的标准内边距，请将元素包裹在
提供的 <InputControlPrefixWrapper> 组件中。

import {
  __experimentalInputControl as InputControl,
  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
} from '@wordpress/components';

<InputControl
  prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
/>

selectedId

• Type: string
• Required: No

当前选中节点的 ID。

size

• Type: "default" | "small" | "compact"
• Required: No
• Default: 'default'

调整输入框的大小。

suffix

• Type: ReactNode
• Required: No

在输入框右侧渲染一个元素。

默认情况下，后缀与输入框边框的边缘对齐，没有内边距。
如果您希望应用符合尺寸变体的标准内边距，请将元素包裹在
提供的 <InputControlSuffixWrapper> 组件中。

import {
  __experimentalInputControl as InputControl,
  __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
} from '@wordpress/components';

<InputControl
  suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
/>

tree

• Type: Tree[]
• Required: No

包含用户可选择的可能节点的树对象数组。

variant

• Type: "default" | "minimal"
• Required: No
• Default: 'default'

控件的样式变体。