使用

Select组件由InputBase和Combobox构建

Data 格式

data属性支持下列格式:

字符串数组:

import { Select } from "@rtdui/core";

function Demo() {
  return <Select data={["React", "Angular"]} />;
}

对象数组, 对象包含value, label 和可选的disabled键:

import { Select } from "@rtdui/core";

function Demo() {
  return (
    <Select
      data={[
        { value: "react", label: "React" },
        { value: "vue", label: "Vue" },
        { value: "ng", label: "Angular", disabled: true },
      ]}
    />
  );
}

分组对象数组, 分组对象包含group, items键, items的值为字符串数组或对象数组.

分组对象数组, items为字符串数组:

import { Select } from "@rtdui/core";

function Demo() {
  return (
    <Select
      data={[
        { group: "Frontend", items: ["React", "Angular"] },
        { group: "Backend", items: ["Express", "Django"] },
      ]}
    />
  );
}

分组对象数组, items为对象数组:

import { Select } from "@rtdui/core";

function Demo() {
  return (
    <Select
      data={[
        {
          group: "Frontend",
          items: [
            { value: "react", label: "React" },
            { value: "ng", label: "Angular", disabled: true },
          ],
        },
        {
          group: "Backend",
          items: [
            { value: "express", label: "Express" },
            { value: "django", label: "Django" },
          ],
        },
      ]}
    />
  );
}

尺寸

颜色

标签和帮助文本

左侧节和右侧节

disabled(禁用)

Readonly(只读)

在<form>中使用

用在Popover内

嵌套Popover要求子Popover必须禁用withPortal属性. 如果Portal没有被禁用, 点击子Popover外部会关闭嵌套的所有Popover

所有基于Combobox的组件(间接基于Popover), 如AutoComplete,Select,MultiSelect, TagsInput内部都使用了Popover, 以及直接基于Popover构建的组件, 如Tooltip组件, 这些组件用在Popover组件内, 必须设置它们的withPortal属性为false

import { Button, Popover, Select } from "@rtdui/core";

function Demo() {
  return (
    <Popover width={300} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <AutoComplete
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="DatePickerInput within Popover"
          placeholder="DatePickerInput within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Select
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <MultiSelect
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <TagsInput
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Tooltip
          withinPortal={false} // 直接基于Popover的通过withinPortal禁用
          tip="click me"
        >
          <button></button>
        </Tooltip>
      </Popover.Dropdown>
    </Popover>
  );
}