选择

选择组件是允许用户从 预定义选项.

理想的是,当有超过5个选项时,应该使用它,否则你 可能考虑使用无线电组.

安装

yarn add @chakra-ui/select

# or

npm i @chakra-ui/select

导入组件

import { Select } from "@chakra-ui/select"

使用量

<Select placeholder="A simple select component">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</Select>

国家

已禁用

通过 isDisabled 将选中组件置于无效状态的道具

<Select placeholder="Select option" isDisabled>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</Select>

无效

通过 isInvalid 将选中组件置于无效状态的道具

<Select placeholder="Select option" isInvalid>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</Select>

备选案文

通过传出 variant 道具 (英语).

允许以下值: 大纲、 已填充、 已冲出、 未样式

<Stack>
  <Select placeholder="Select option" variant="outline">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </Select>

  <Select placeholder="Select option" variant="filled">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </Select>

  <Select placeholder="Select option" variant="flushed">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </Select>

  <Select placeholder="Select option" variant="unstyled">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </Select>
</Stack>

大小

通过 size 用于改变选定组件的大小和高度的道具.

允许以下值: sm, md, lg (英语)

<Stack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Select key={size} placeholder="Select option" size={size}>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </Select>
  ))}
</Stack>

受控选择

const ControlledSelectExample = () => {
  const [value, setValue] = React.useState("")
  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setValue(event.target.value)
  }

  return (
    <Select
      value={value}
      onChange={handleChange}
      placeholder="Controlled select"
    >
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </Select>
  )
}

更改选择中的图标

通过 icon 将选中组件的箭头图标更改为 a 自定义图标.

你也可以进入 iconSize 更改自定义大小的道具 箭头图标.

const CustomSelectIconExample = () => {
  const SelectIcon = () => (
    <Icon viewBox="0 0 24 24">
      <path
        fill="currentColor"
        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
      />
    </Icon>
  )
  return <Select icon={SelectIcon} placeholder="Placeholder" size="md" />
}

聚焦边框颜色和错误边框颜色

通过 focusBorderColor 改变选定边框颜色的道具 在焦点状态下的组成部分.

通过 errorBorderColor 改变选定边框颜色的道具 在无效状态中.

这些道具的值可以设置为主题对象的颜色,也可以设置为原始 CSS 数值.

<Stack>
  <Select focusBorderColor="lime" placeholder="Here is a sample placeholder" />

  <Select
    isInvalid
    errorBorderColor="crimson"
    placeholder="Here is a sample placeholder"
  />
</Stack>

覆盖选择样式

尽管选择带有预定义的样式,但您可以覆盖漂亮 任何财产 我们来翻过背景颜色.

<Select
  color="white"
  borderColor="tomato"
  backgroundColor="tomato"
  placeholder="Woohoo! A new background color!"
/>