登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
开源项目 > WEB应用开发 > React 组件 &&
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
2 Star 0 Fork 1

react-component / select

代码 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
分支 220
标签 456
贡献代码
同步代码
创建 Pull Request
了解更多
对比差异 通过 Pull Request 同步
同步更新到分支
通过 Pull Request 同步
将会在向当前分支创建一个 Pull
Request，合入后将完成同步
取消
提示: 由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件
.github
assets
docs
src
tests
typings
.dumirc.ts
.editorconfig
.eslintrc.js
.fatherrc.js
.gitignore
.prettierignore
.prettierrc
.umirc.ts
HISTORY.md
LICENSE.md
README.md
now.json
package.json
tsconfig.json
Loading...
README
MIT

rc-select

React Select

NPM version npm download build status Codecov bundle size dumi

Screenshots

Feature

  • support IE11+,Chrome,Firefox,Safari

Keyboard

  • Open select (focus input || focus and click)
  • KeyDown/KeyUp/Enter to navigate menu

install

rc-select

Usage

basic use

import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

export default () => (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);

API

Select props

name description type default
id html id to set on the component wrapper String ''
className additional css class of root dom node String ''
data-* html data attributes to set on the component wrapper String ''
prefixCls prefix class String ''
animation dropdown animation name. only support slide-up now String ''
transitionName dropdown css animation name String ''
choiceTransitionName css animation name for selected items at multiple mode String ''
dropdownMatchSelectWidth whether dropdown's width is same with select boolean true
dropdownClassName additional className applied to dropdown String -
dropdownStyle additional style applied to dropdown React.CSSProperties {}
dropdownAlign additional align applied to dropdown AlignType {}
dropdownMenuStyle additional style applied to dropdown menu Object React.CSSProperties
notFoundContent specify content to show when no result matches. ReactNode 'Not Found'
tokenSeparators separator used to tokenize on tag/multiple mode string[]?
open control select open boolean
defaultOpen control select default open boolean
placeholder select placeholder React Node
showSearch whether show search input in single mode boolean true
allowClear whether allowClear boolean { clearIcon?: ReactNode }
tags when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. boolean false
tagRender render custom tags. (props: CustomTagProps) => ReactNode -
maxTagTextLength max tag text length to show number -
maxTagCount max tag count to show number -
maxTagPlaceholder placeholder for omitted values ReactNode/function(omittedValues) -
combobox enable combobox mode(can not set multiple at the same time) boolean false
multiple whether multiple select boolean false
disabled whether disabled select boolean false
filterOption whether filter options by input value. default filter by option's optionFilterProp prop's value boolean true/Function(inputValue:string, option:Option)
optionFilterProp which prop value of option will be used for filter if filterOption is true String 'value'
filterSort Sort function for search options sorting, see Array.sort's compareFunction. Function(optionA:Option, optionB: Option) -
optionLabelProp render option value or option children as content of select String: 'value'/'children' 'value'
defaultValue initial selected option(s) String | String[] -
value current selected option(s) String | String[] | {key:String, label:React.Node} | {key:String, label:React.Node}[] -
labelInValue whether to embed label in value, see above value type. Not support combobox mode boolean false
backfill whether backfill select option to search input (Only works in single and combobox mode) boolean false
onChange called when select an option or input value change(combobox) function(value, option:Option | Option[]) -
onSearch called when input changed function -
onBlur called when blur function -
onFocus called when focus function -
onPopupScroll called when menu is scrolled function -
onSelect called when a option is selected. param is option's value and option instance Function(value, option:Option) -
onDeselect called when a option is deselected. param is option's value. only called for multiple or tags Function(value, option:Option) -
onInputKeyDown called when key down on input Function(event) -
defaultActiveFirstOption whether active first option by default boolean true
getPopupContainer container which popup select menu rendered into function(trigger:Node):Node function(){return document.body;}
getInputElement customize input element function(): Element -
showAction actions trigger the dropdown to show String[]? -
autoFocus focus select after mount boolean -
autoClearSearchValue auto clear search input value when multiple select is selected/deselected boolean true
suffixIcon specify the select arrow icon ReactNode -
clearIcon specify the clear icon ReactNode -
removeIcon specify the remove icon ReactNode -
menuItemSelectedIcon specify the item selected icon ReactNode | (props: MenuItemProps) => ReactNode -
dropdownRender render custom dropdown menu (menu: React.Node) => ReactNode -
loading show loading icon in arrow boolean false
virtual Disable virtual scroll boolean true
direction direction of dropdown 'ltr' | 'rtl' 'ltr'
optionRender Custom rendering options (oriOption: FlattenOptionData<BaseOptionType> , info: { index: number }) => React.ReactNode -
labelRender Custom rendering label (props: LabelInValueType) => React.ReactNode -
maxCount The max number of items can be selected number -

Methods

name description parameters return
focus focus select programmably - -
blur blur select programmably - -

Option props

name description type default
className additional class to option String ''
disabled no effect for click or keydown for this item boolean false
key if react want you to set key, then key is same as value, you can omit value String/number -
value default filter by this attribute. if react want you to set key, then key is same as value, you can omit value String/number -
title if you are not satisfied with auto-generated title which is show while hovering on selected value, you can customize it with this property String -

OptGroup props

name description type default
label group label String/React.Element -
key - String -
value default filter by this attribute. if react want you to set key, then key is same as value, you can omit value String -
className same as Option props String ''
title same as Option props String -

Development

npm install
npm start

Example

local example: http://localhost:9001/

online example: http://select.react-component.now.sh/

Test Case

npm test

Coverage

npm run coverage

License

rc-select is released under the MIT license.

The MIT License (MIT) Copyright (c) 2014-present alipay.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Starred
0
Star
0
Fork
1

简介

暂无描述 展开 收起
暂无标签
/mirrors_react-component/select
TypeScript 等 3 种语言
TypeScript
96.4%
Less
2.7%
JavaScript
0.9%
MIT
使用 MIT 开源许可协议
取消

发行版

暂无发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

1. 开源生态

  • 生产力：来评估开源项目输出软件制品和开源价值的能力。
  • 创新力：用于评估开源软件及其生态系统的多样化程度。
  • 稳健性：用于评估开源项目面对多变的发展环境，抵御内外干扰并自我恢复的能力。

2. 协作、人、软件

  • 协作：代表了开源开发行为中协作的程度和深度。
  • 人：观察开源项目核心人员在开源项目中的影响力，并通过第三方视角考察用户和开发者对开源项目的评价。
  • 软件：从开源项目对外输出的制品评估其价值最终落脚点。也是开源评估最“古老”的主流方向之一“开源软件” 的具体表现。

3. 评估模型

    基于“开源生态”与“协作、人、软件”的维度，找到与该目标直接或间接相关的可量化指标，对开源项目健康与生态进行量化评估，最终形成开源评估指数。

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/mirrors_react-component/select.git
git@gitee.com:mirrors_react-component/select.git
mirrors_react-component
select
select
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部