选择器

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

导入

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 md:w-1/3 flex-col gap-2"}>
      <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 md:w-2/3 flex-col gap-2"}>
      <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' }
      ]
    }
  ]}
/>

自定义渲染

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 个并且没有分组的时候就会自动开启虚拟滚动

<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