| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-select

下拉列表组件。

特性

• [x] 支持多选
• [x] Option 支持深度嵌套和自定义
• [x] option 支持过滤, select 可以搜索
• [x] 支持方向键上下导航，并且跳过禁用的。

安装

# yarn
yarn add xy-select

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Select, OptGroup, Option } from "xy-select";
ReactDOM.render(
    <Select>
        <OptGroup label="编程语言">
            <Option value="C">C</Option>
            <Option value="C++">C++</Option>
            <Option value="Object-C">Object-C</Option>
            <Option value="JavaScript">JavaScript</Option>
            <Option value="C#">C#</Option>
            <Option value="VB">VB</Option>
            <Option value="GO">GO</Option>
        </OptGroup>
    </Select>,
    container,
);

何时使用

• 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

API

Select

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------ | ---------------------------------------------- | -------- | | value | 选中值 | any/any[] | 无 | | defaultValue | 默认选中值 | any/any[] | 无 | | filter | 是否过滤 option, 提供过滤函数则过滤 | (cfg: OptionConfig, search: string) => boolean | 无 | | autoFocus | 是否焦点 | boolean | false | | disabled | 是否禁用 | boolean | false | | multiple | 是否多选 | boolean | false | | searchMode | 是否搜索模式, 启用搜索模式点击下拉列表会显示输入框, 进行搜索 | boolean | false | | popupClassName | 弹出内容类名 | string | 无 | | stretch | 弹出框是否宽度与 Select 宽度对齐 | boolean | true | | placeholder | 占位符文本 | React.ReactNode | "请选择" | | onChange | 下拉列表选中值改变回调 | (value: any) => void | 无 | | onBlur | onBlur 事件 | (e: React.FocusEvent) => void | 无 | | onSearch | 搜索事件, 此事件自带节流函数 | (search: string) => void | 无 | | empyPlaceholder | 空内容占位符, 内容为空时提示文本 | string | 无 |

OptGroup

| 属性 | 说明 | 类型 | 默认值 | | -------- | ------------------ | --------------- | ------ | | label | 标签组名 | string | 无 | | children | 标签组内的 options | React.ReactNode | 无 |

Option

| 属性 | 说明 | 类型 | 默认值 | | -------- | -------------------------------------------------------------------------- | --------------- | ------ | | label | 标签名, 对自动提取得标签不满意, 或 children 内无法提取字符串, 则需手动指定 | string | 无 | | value | 选中的值 | string/number | 无 | | children | 内容 | React.ReactNode | 无 | | disabled | 是否禁用 | boolean | false | | divided | 是否显示分割线 | boolean | false |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-select is released under the MIT license.