基于React的下拉列表组件


Keywords
react, react-component, xy-select
License
MIT
Install
npm install xy-select@1.3.4

Documentation

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

NPM version node version npm download

xy-select

xy-select

下拉列表组件。

特性

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

安装

# yarn
yarn add xy-select utils-dom utils-hooks xy-empty classnames

使用例子

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.