Xy-select NPM | npm.io


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

NPM version npm download

xy-select

下拉列表组件。

特性

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

安装

# 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