npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alicd/crui-select-field

v0.0.22

Published

从指定的值列表中选择性输入

Downloads

3

Readme


category: Components type: UI Views component: Form chinese: 下拉框 english: SelectField source: next-select

从指定的值列表中选择性输入,如果你不期望用户输入的值生效而仅仅是选择,那么使用Select. 同时可以使用Select的showSearch属性进行过滤。

dataSource的使用

Select同时支持children和在props中传入dataSource作为数据源,如果同时设置,则以children为准.

注意: Select默认使用value作为渲染的菜单项的key值,所以value不能重复, 否则无法渲染下拉菜单

  • children的方式
<SelectField>
    <Select.Option value="option1">option1</Select.Option>
    <Select.Option value="option2">option2</Select.Option>
    <Select.Option disabled={true}>disabled</Select.Option>
</SelectField>
  • props的方式
var dataSource = [
    {label:'option1', value:'option1},
    {label:'option2', value:'option2'},
    {label:'disabled', disabled:true}
]
<SelectField dataSource={dataSource}/>

API

SelectField

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------- | | prefix | 样式类名的品牌前缀 | String | 'next-' | | className | 自定义类名 | String | - | | style | 自定义内联样式 | Object | - | | size | 选择器的尺寸可选值:'small', 'medium', 'large' | Enum | 'medium' | | shape | 选择器的形状可选值:'normal', 'arrow-only' | Enum | 'normal' | | value | 当前值 | String/Array/ReactNode/Object | - | | defaultValue | 初始默认值 | String/Array/ReactNode/Object | - | | onChange | Select发生改变的时候触发的回调签名:Function(value: String, option: Object) => void参数:value: {String} 数据option: {Object} 选项 | Function | () => {} | | container | 弹层挂载容器节点 | String/Function | - | | placeholder | 没有值的时候的占位符 | String | '' | | visible | 当前弹层是否显示 | Boolean | - | | defaultVisible | 弹层初始是否显示 | Boolean | - | | disabled | 是否禁用 | Boolean | false | | readOnly | 是否只读,只读模式下可以展开弹层但不能选择 | boolean | false | | dataSource | 传入的数据,可以动态渲染子项,详见dataSource的使用 | Array | - | | multiple | 是否是多选 | Boolean | false | | compact | 多选状态(multipletrue)时,以单行形式展示已选项,并显示已选项数目。用来避免空间较窄且已选项较多时出现的样式问题。 | boolean | false | | fillProps | 填充到选择框里面的值 | String | 'label' | | showSearch | 是否显示顶部的搜索框 | Boolean | false | | filterBy | 在输入的时候过滤的函数,仅在filterLocal为true时候有效签名:Function(filterValue: String, option: Object) => Boolean参数:filterValue: {String} 筛选值option: {Object} 选项返回值:{Boolean} 是否保留当前选项 | Function | - | | filterLocal | 是否使用本地过滤,在数据源为远程的时候需要关闭此选项 | Boolean | true | | hasArrow | 是否显示右侧的箭头 | Boolean | true | | autoWidth | 下拉菜单是否与选择器对齐 | Boolean | true | | onSearch | 在搜索框中输入触发的事件,仅在showSearch为true时候有效签名:Function(value: String) => void参数:value: {String} 搜索值 | Function | () => {} | | hasClear | 是否显示清空按钮,该按钮可以清空select的value, 该属性仅在单选模式下有效 | Boolean | false | | popupClassName | 弹出层的样式类 | String | - | | popupProps | 弹出层的属性 | Object | - | | onVisibleChange | 弹层显示或隐藏的时候触发的事件签名:Function(visible: Boolean) => void参数:visible: {Boolean} 弹层是否隐藏和显示 | Function | () => {} | | onOpen | 弹层显示时触发的事件签名:Function() => void | Function | () => {} | | onClose | 弹层隐藏时触发的事件签名:Function() => void | Function | () => {} | | locale | 自定义国际化文案对象属性:selectPlaceHolder: {String} 请选择的提示文案comboboxPlaceHolder: {String} 请输入的提示文案 | Object | { selectPlaceHolder: '请选择', comboboxPlaceHolder: '请输入' } | | language | 自定义国际化语言可选值:'en-us', 'zh-cn', 'zh-tw' | Enum | - | | hasSelectAll | 是否显示全选功能, 多选模式下才生效 @ali/[email protected]+有该功能 | Boolean | false | | selectAllText | 全选的文案,多选模式下才生效 @ali/[email protected]+有该功能 | String | 简体:全选、繁体:全選、英文:Select All | | cancelSelectAllText | 取消全选的文案,多选模式下才生效 @ali/[email protected]+有该功能 | String | 简体:取消全选、繁体:取消全選、英文:Cancel | | label | label 标签的文本 | ReactNode | - | | labelCol | label 标签布局,通 <Col> 组件,设置 span offset 值,如 {span: 8, offset: 16},该项仅在垂直表单有效 | Object | - | | help | 提示信息,如不设置,则会根据校验规则自动生成. 如果设置会受控(ps: 可以利用这点自定义错误位置,详细看demo自定义错误) | ReactNode | - | | validateStatus | 校验状态,如不设置,则会根据校验规则自动生成可选值:'''success'(成功)'error'(失败)'loading'(校验中) | Enum | - | | hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标, 目前只有Input支持 | Boolean | false | | wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | Object | - | | extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 位于错误信息后面 | ReactNode | - | | inputStyle | 表单输入框自定义内联样式 | Object/String | null | | showValidateType | 应用于Field 类元素后,指定其展示错误的方式,可选值有 helptooltip 两种| String | help | | name | walle 模式下才支持 可以配合表单Form 收集表单元素的数据,要求表单必须指定 field 属性 | String | '' | | rules | walle 模式下才支持 配置表单规则,可以配置多个规则,可参考:async-validator,注意Form 表单必须配置field 属性才会生效 | Array | null | | x-bind | walle 模式下才支持 双向绑定某一个变量 | state | null |

Select.Option

| 参数 | 说明 | 类型 | 默认值 | | -------- | ---- | ------- | --- | | value | 选项值 | any | - | | disabled | 是否禁用 | Boolean | - | | children | 列表项显示的值,通过子标签的方式设置 | any | - |