Select

当选项过多时，使用下拉菜单展示并选择内容。

基本用法

通过传入 data 属性添加下拉项数据

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

  const data = [
    { label: '下拉选择一', value: 1 },
    { label: '下拉选择二', value: 2 },
    { label: '下拉选择三', value: 3 },
    { label: '下拉选择四', value: 4 },
    { label: '下拉选择五', value: 5 }
  ]

  return (
    <div className="ykui-demo-column">
      <Select
        data={data}
        value={value}
        onChange={(val)=>setValue(val)}
      />
    </div>
  )
}

触发下拉的方式

通过设置 trigger 属性，可选值：hover click focus

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

  const data = [
    { label: '下拉选择一', value: 1 },
    { label: '下拉选择二', value: 2 },
    { label: '下拉选择三', value: 3 },
    { label: '下拉选择四', value: 4 },
    { label: '下拉选择五', value: 5 }
  ]

  return (
    <div className="ykui-demo-column">
      <Select
        data={data}
        value={value}
        onChange={(val)=>setValue(val)}
        trigger="hover"
        placeholder="hover触发"
      />
      <Select
        data={data}
        value={value}
        onChange={(val)=>setValue(val)}
        trigger="click"
        placeholder="click触发"
      />
      <Select
        data={data}
        value={value}
        onChange={(val)=>setValue(val)}
        trigger="focus"
        placeholder="focus触发"
      />
    </div>
  )
}

清空选择

通过 clearable 属性设置

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

  const data = [
    { label: '下拉选择一', value: 1 },
    { label: '下拉选择二', value: 2 },
    { label: '下拉选择三', value: 3 },
    { label: '下拉选择四', value: 4 },
    { label: '下拉选择五', value: 5 }
  ]

  return (
    <div className="ykui-demo-column">
      <Select
        data={data}
        value={value}
        clearable
        onChange={(val)=>setValue(val)}
      />
    </div>
  )
}

禁用状态

通过传入 disabled 属性添加下拉项数据。

function App() {
  return (
    <div className="ykui-demo-column">
      <Select disabled/>
    </div>
  )
}

多选选择器

通过传入 multiple 属性控制多选。

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

  const data = [
    { label: '下拉选择一', value: 1 },
    { label: '下拉选择二', value: 2 },
    { label: '下拉选择三', value: 3 },
    { label: '下拉选择四', value: 4 },
    { label: '下拉选择五', value: 5 }
  ]

  return (
    <div className="ykui-demo-column">
      <Select
        data={data}
        value={value}
        multiple
        onChange={(val)=>setValue(val)}
      />
    </div>
  )
}

自定义单项内容

通过 <Select.Option> 单独设置单项。

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

  const data = [
    { label: '下拉选择一', value: 1 },
    { label: '下拉选择二', value: 2 },
    { label: '下拉选择三', value: 3 },
    { label: '下拉选择四', value: 4 },
    { label: '下拉选择五', value: 5 }
  ]

  return (
    <div className="ykui-demo-column">
      <Select>
        {data.map((item) => (
          <Select.Option value={item.value} label={item.label}>
            <div className="customer">
              <div className="title">{item.label}</div>
              <div className="sub-title">sub title</div>
            </div>
          </Select.Option>
        ))}
        <div style={{ borderTop: '1px solid #ccc', padding: '8px 0' }} />
        <span
          role="button"
          style={{ padding: '8px 12px', color: 'blue' }}
          onClick={this.onAdd}
        >
          Add Link
        </span>
      </Select>
    </div>
  )
}

无边框选择器

通过 border 属性控制是否显示边框。

function App() {
  return (
    <div className="ykui-demo-column">
      <Select border={false} />
    </div>
  )
}

API

属性	说明	类型	默认值
placeholder	提示	string	--
children	内容	ReactNode	--
className	类名	string	--
style	样式	CSSProperties	--
data	选项数据	DataType	--
defaultValue	默认值	any	--
value	选中值	any	--
placement	下拉位置	PlacementType	--
multiple	是否多选	boolean	--
trigger	触发下拉的方式	"hover"〡"click"〡"focus"	--
width	宽度	number	--
displayValue	自定义值显示	ReactNode	--
border	是否有边框	boolean	--
fixedWidth	宽度是否与下拉框一致	boolean	--
disabled	是否禁用	boolean	--
clearable	是否清空	boolean	--
disabledValue	禁用值	DisabledValueType	--
options	options	OptionsType	--
onChange	值变触发	Func	--