Select 选择器组件 #

import { Select } from '@chakra-ui/react'

function Example() {
  return (
    <Select placeholder="请选择选项">
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
      <option value="option3">选项 3</option>
    </Select>
  )
}

<Select size="xs" placeholder="超小选择器">
  <option>选项</option>
</Select>

<Select size="sm" placeholder="小选择器">
  <option>选项</option>
</Select>

<Select size="md" placeholder="中等选择器（默认）">
  <option>选项</option>
</Select>

<Select size="lg" placeholder="大选择器">
  <option>选项</option>
</Select>

<Select variant="outline" placeholder="轮廓选择器（默认）">
  <option>选项</option>
</Select>

<Select variant="filled" placeholder="填充选择器">
  <option>选项</option>
</Select>

<Select variant="flushed" placeholder="下划线选择器">
  <option>选项</option>
</Select>

<Select variant="unstyled" placeholder="无样式选择器">
  <option>选项</option>
</Select>

<Select isDisabled placeholder="禁用选择器">
  <option>选项</option>
</Select>

<Select isInvalid placeholder="错误选择器">
  <option>选项</option>
</Select>

<Select isReadOnly placeholder="只读选择器">
  <option>选项</option>
</Select>

function ControlledSelect() {
  const [value, setValue] = useState('')

  return (
    <Select
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="选择选项"
    >
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
      <option value="option3">选项 3</option>
    </Select>
  )
}

import { FormControl, FormLabel, FormHelperText } from '@chakra-ui/react'

<FormControl>
  <FormLabel>选择国家</FormLabel>
  <Select placeholder="请选择国家">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
  </Select>
  <FormHelperText>请选择您所在的国家</FormHelperText>
</FormControl>

<Select placeholder="选择城市">
  <optgroup label="中国">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </optgroup>
  <optgroup label="美国">
    <option value="newyork">纽约</option>
    <option value="losangeles">洛杉矶</option>
  </optgroup>
</Select>

<Select
  icon={<ChevronDownIcon />}
  iconColor="blue.500"
  iconSize="20px"
  placeholder="选择选项"
>
  <option>选项 1</option>
  <option>选项 2</option>
</Select>

<Select
  focusBorderColor="blue.500"
  errorBorderColor="red.500"
  placeholder="选择选项"
>
  <option>选项</option>
</Select>

function ProvinceSelect() {
  const [province, setProvince] = useState('')
  const [city, setCity] = useState('')
  
  const cities = {
    beijing: ['东城区', '西城区', '朝阳区', '海淀区'],
    shanghai: ['黄浦区', '徐汇区', '浦东新区'],
    guangzhou: ['天河区', '越秀区', '白云区'],
  }

  return (
    <HStack spacing={4}>
      <FormControl>
        <FormLabel>省份</FormLabel>
        <Select
          value={province}
          onChange={(e) => {
            setProvince(e.target.value)
            setCity('')
          }}
          placeholder="选择省份"
        >
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
        </Select>
      </FormControl>
      
      <FormControl>
        <FormLabel>城市</FormLabel>
        <Select
          value={city}
          onChange={(e) => setCity(e.target.value)}
          placeholder="选择城市"
          isDisabled={!province}
        >
          {(cities[province] || []).map((c) => (
            <option key={c} value={c}>{c}</option>
          ))}
        </Select>
      </FormControl>
    </HStack>
  )
}

function QuantitySelect({ value, onChange, max = 10 }) {
  return (
    <FormControl>
      <FormLabel>数量</FormLabel>
      <Select
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
      >
        {Array.from({ length: max }, (_, i) => i + 1).map((n) => (
          <option key={n} value={n}>{n}</option>
        ))}
      </Select>
    </FormControl>
  )
}

function SortSelect({ value, onChange }) {
  return (
    <Select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      size="sm"
      w="auto"
    >
      <option value="newest">最新发布</option>
      <option value="price-asc">价格从低到高</option>
      <option value="price-desc">价格从高到低</option>
      <option value="popular">最受欢迎</option>
    </Select>
  )
}

function PageSizeSelect({ value, onChange }) {
  return (
    <HStack>
      <Text>每页显示</Text>
      <Select
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        size="sm"
        w="auto"
      >
        <option value={10}>10</option>
        <option value={20}>20</option>
        <option value={50}>50</option>
        <option value={100}>100</option>
      </Select>
      <Text>条</Text>
    </HStack>
  )
}