选择器

当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。

导入

import { Select, NativeSelect } from "@resolid/react-ui";

Select 选择器
NativeSelect 原生选择器

基本

请选择...

<Select
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>
<Select
  multiple
  className={"min-w-56"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>

可控

你最常用的库:

请选择...

你曾学习的库:

请选择...

const [value, setValue] = useState("");
const [values, setValues] = useState([]);

return (
  <>
    <div className={"flex w-full flex-col gap-2 md:w-1/3"}>
      <p>你最常用的库: {value}</p>
      <Select
        className={"w-36"}
        value={value}
        onChange={(value) => setValue(value)}
        options={[
          { value: "react", label: "React" },
          { value: "angular", label: "Angular" },
          { value: "svelte", label: "Svelte" },
          { value: "vue", label: "Vue" },
          { value: "solid", label: "Solid" },
          { value: "preact", label: "Preact" },
        ]}
      />
    </div>
    <div className={"flex w-full flex-col gap-2 md:w-2/3"}>
      <p>你曾学习的库: {values.join(", ")}</p>
      <Select
        multiple
        closeOnSelect={false}
        className={"min-w-36"}
        value={values}
        onChange={(values) => setValues(values)}
        options={[
          { value: "react", label: "React" },
          { value: "angular", label: "Angular" },
          { value: "svelte", label: "Svelte" },
          { value: "vue", label: "Vue" },
          { value: "solid", label: "Solid" },
          { value: "preact", label: "Preact" },
        ]}
      />
    </div>
  </>
);

状态

请选择...

<Select
  disabled
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>
<Select
  invalid
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>
<Select
  readOnly
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>

大小

请选择...

<Select
  className={"w-28"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
  size={'xs'}
/>
<Select
  multiple
  className={"w-28"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
  size={'sm'}
/>
<Select
  className={"w-28"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
  size={'md'}
/>
<Select
  multiple
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
  size={'lg'}
/>
<Select
  className={"w-36"}
  options={Array(10)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
  size={'xl'}
/>

选项组

请选择...

<Select
  className={"w-52"}
  options={[
    {
      label: "前端",
      options: [
        { label: "React", value: "react" },
        { label: "Vue", value: "vue" },
        { label: "Angular", value: "angular" },
      ],
    },
    {
      label: "后端",
      options: [
        { label: "Express", value: "express" },
        { label: "Koa", value: "koa" },
        { label: "Laravel", value: "laravel" },
      ],
    },
    {
      label: "数据库",
      options: [
        { label: "Mysql", value: "mysql", disabled: true },
        { label: "Postgres", value: "postgres" },
        { label: "SQLite", value: "sqlite" },
      ],
    },
  ]}
/>

自定义渲染

Google Chrome

Firefox

const browsers = [
  {
    value: "chrome",
    name: "Google Chrome",
    icon: <BrowserIcon name={"chrome"} />,
    description: "Google Chrome 是一款快速、易于使用且安全的网络浏览器。",
  },
  {
    value: "firefox",
    name: "Firefox",
    icon: <BrowserIcon name={"firefox"} />,
    description: "Firefox 是由 Mozilla 支持的免费网络浏览器。",
  },
  {
    value: "safari",
    name: "Safari",
    icon: <BrowserIcon name={"safari"} />,
    description: "Safari 是在所有 Apple 设备上体验互联网的最佳方式。",
  },
  {
    value: "edge",
    name: "Microsoft Edge",
    icon: <BrowserIcon name={"edge"} />,
    description: "Microsoft Edge 是新 Bing 体验的最佳浏览器。",
  },
  {
    value: "opera",
    name: "Opera",
    icon: <BrowserIcon name={"opera"} />,
    description: "比默认浏览器更快、更安全、更智能。 功能齐全，可保护隐私、安全等。",
  },
  {
    value: "brave",
    name: "Brave",
    icon: <BrowserIcon name={"brave"} />,
    description: "Brave 浏览器是一款超快速、私密且安全的网络浏览器，带有 Adblock。",
  },
  {
    value: "vivaldi",
    name: "Vivaldi",
    icon: <BrowserIcon name={"vivaldi"} />,
    description: "我们正在构建一个快速、高度可定制的浏览器，优先考虑您的隐私。",
  },
];

const renderOption = (browser) => {
  return (
    <div className={"flex items-center gap-3"}>
      {browser.icon}
      <div>
        <div>{browser.name}</div>
        <div className={"text-fg-subtle text-sm"}>{browser.description}</div>
      </div>
    </div>
  );
};

const renderLabel = (browser) => {
  return (
    <div className={"flex flex-row items-center gap-2"}>
      {browser.icon}
      {browser.name}
    </div>
  );
};

return (
  <>
    <Select
      className={"w-56"}
      defaultValue={"chrome"}
      options={browsers}
      renderLabel={renderLabel}
      renderOption={renderOption}
    />
    <Select
      className={"w-96"}
      defaultValue={["firefox", "chrome"]}
      options={browsers}
      multiple
      renderLabel={renderLabel}
      renderOption={renderOption}
    />
  </>
);

虚拟滚动

当选项值超过 30 个并且没有分组的时候就会自动开启虚拟滚动

请选择...

选项 102

选项 252

<Select
  className={"w-36"}
  options={Array(1000)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>
<Select
  className={"w-36"}
  defaultValue={102}
  options={Array(1000)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>
<Select
  multiple
  className={"min-w-56"}
  defaultValue={[102,252]}
  options={Array(1000)
    .fill(null)
    .map((_, idx) => idx + 1)
    .map((eve) => ({ value: eve, label: `选项 ${eve}` }))}
/>

原生选择器

<NativeSelect size={'xs'} placeholder={'选择框架'}>
  <option value={'react'}>React</option>
  <option value={'vue'}>Vue</option>
  <option value={'angular'} disabled>Angular</option>
  <option value={'solid'}>Solid</option>
  <option value={'svelte'}>Svelte</option>
</NativeSelect>
<NativeSelect size={'sm'} placeholder={'选择框架'}>
  <option value={'react'}>React</option>
  <option value={'vue'}>Vue</option>
  <option value={'angular'}>Angular</option>
  <option value={'solid'}>Solid</option>
  <option value={'svelte'}>Svelte</option>
</NativeSelect>
<NativeSelect defaultValue={'solid'} placeholder={'选择框架'}>
  <option value={'react'}>React</option>
  <option value={'vue'}>Vue</option>
  <option value={'angular'}>Angular</option>
  <option value={'solid'}>Solid</option>
  <option value={'svelte'}>Svelte</option>
</NativeSelect>
<NativeSelect size={'lg'} placeholder={'选择框架'}>
  <option value={'react'}>React</option>
  <option value={'vue'}>Vue</option>
  <option value={'angular'}>Angular</option>
  <option value={'solid'}>Solid</option>
  <option value={'svelte'}>Svelte</option>
</NativeSelect>
<NativeSelect size={'xl'} placeholder={'选择框架'}>
  <option value={'react'}>React</option>
  <option value={'vue'}>Vue</option>
  <option value={'angular'}>Angular</option>
  <option value={'solid'}>Solid</option>
  <option value={'svelte'}>Svelte</option>
</NativeSelect>

属性

选择器

属性	类型	默认值	必须
属性options	类型readonly Option[]	默认值-	必须true
属性fieldNames	类型OptionFieldNames	默认值-	必须false
属性size	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值'md'	必须false
属性multiple	类型boolean	默认值false	必须false
属性placeholder	类型string	默认值'请选择...'	必须false
属性disabled	类型boolean	默认值false	必须false
属性required	类型boolean	默认值false	必须false
属性invalid	类型boolean	默认值false	必须false
属性block	类型boolean	默认值false	必须false
属性value	类型string \| number \| (string \| number)[] \| null	默认值-	必须false
属性defaultValue	类型string \| number \| (string \| number)[] \| null	默认值-	必须false
属性closeOnSelect	类型boolean	默认值true	必须false
属性onChange	类型((value: string \| number \| (string \| number)[] \| null) => void)	默认值-	必须false
属性onSearch	类型(value: string) => void	默认值-	必须false
属性onSelect	类型((value: string \| number \| null, option: Omit<Option, never>) => void)	默认值-	必须false
属性onDeselect	类型((value: string \| number \| null, option: Omit<Option, never>) => void)	默认值-	必须false
属性renderLabel	类型Render<Omit<Option, never>>	默认值-	必须false
属性renderOption	类型Render<Omit<Option, never>>	默认值-	必须false
属性duration	类型number	默认值'250'	必须false

原生选择器

属性	类型	默认值	必须
属性size	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值'md'	必须false
属性disabled	类型boolean	默认值false	必须false
属性invalid	类型boolean	默认值false	必须false