选择器

基础使用

Loading...

function Demo() {
  const options = [
    { label: '0 - 50', value: 0 },
    { label: '50 - 100', value: 1 },
    { label: '100 - 200', value: 2 },
    { label: '200 - 500', value: 3 },
    { label: '500 - 1000', value: 4 },
  ]
  const [selectedValue, setSelectedValue] = useState('')
  return (
    <CSelect
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder="请选择"
      options={options}
    />
  )
}

折叠/展开 代码

尺寸

Loading...

function Demo() {
  const options = [
    { label: '0 - 50', value: 0 },
    { label: '50 - 100', value: 1 },
    { label: '100 - 200', value: 2 },
    { label: '200 - 500', value: 3 },
    { label: '500 - 1000', value: 4 },
  ]
  const [selectedValue, setSelectedValue] = useState('')
  return (
    <div className="c-row c-items-center c-gutter-md c-wrap">
      <div>
        <CSelect
          value={selectedValue}
          onChange={setSelectedValue}
          placeholder="超小尺寸"
          size="xs"
          options={options}
        />
      </div>
      <div>
        <CSelect
          value={selectedValue}
          onChange={setSelectedValue}
          placeholder="小尺寸"
          size="sm"
          options={options}
        />
      </div>
      <div>
        <CSelect
          value={selectedValue}
          onChange={setSelectedValue}
          placeholder="中等（默认尺寸）"
          options={options}
        />
      </div>
      <div>
        <CSelect
          value={selectedValue}
          onChange={setSelectedValue}
          placeholder="大尺寸"
          size="lg"
          options={options}
        />
      </div>
      <div>
        <CSelect
          value={selectedValue}
          onChange={setSelectedValue}
          placeholder="超大尺寸"
          size="xl"
          options={options}
        />
      </div>
    </div>
  )
}

折叠/展开 代码

禁用态

Loading...

function Demo() {
  const options = [
    { label: '0 - 50', value: 0 },
    { label: '50 - 100', value: 1 },
    { label: '100 - 200', value: 2 },
    { label: '200 - 500', value: 3 },
    { label: '500 - 1000', value: 4 },
  ]
  const [selectedValue, setSelectedValue] = useState('')
  return (
    <CSelect
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder="禁用态"
      options={options}
      disabled
    />
  )
}

折叠/展开 代码

内容可清除

Loading...

function Demo() {
  const options = [
    { label: '0 - 50', value: 0 },
    { label: '50 - 100', value: 1 },
    { label: '100 - 200', value: 2 },
    { label: '200 - 500', value: 3 },
    { label: '500 - 1000', value: 4 },
  ]
  const [selectedValue, setSelectedValue] = useState('')
  return (
    <CSelect
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder="请选择"
      options={options}
      clearable
    />
  )
}

折叠/展开 代码

多选

Loading...

function Demo() {
  const options = [
    { label: '0 - 50', value: 0 },
    { label: '50 - 100', value: 1 },
    { label: '100 - 200', value: 2 },
    { label: '200 - 500', value: 3 },
    { label: '500 - 1000', value: 4 },
  ]
  const [selectedValue, setSelectedValue] = useState([])
  return (
    <CSelect
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder="请选择"
      multiple
      options={options}
      clearable
    />
  )
}

折叠/展开 代码

Props

名称 (*代表必须)	描述	类型	默认值

No Data