前言
随着前端技术的不断发展,越来越多的开源社区和公司投入到前端技术的研究和发展中。这样的发展也带来了许多优秀的npm包,本文就向大家介绍一款名为@beisen-platform/dropdown-list的npm包。
@beisen-platform/dropdown-list 是什么
@beisen-platform/dropdown-list是一款基于React开发的下拉列表组件,采用了Uncontrolled组件的设计方式,方便使用者进行开发。
该组件的特点是:
- 易于使用;
- 功能非常丰富;
- 可扩展。
下面就让我们来看一看如何使用它。
如何安装
项目中可通过以下方式安装该组件:
--- ------- ------------------------------ ------
如何使用
通过import方式进行使用,代码如下:
------ ------------ ---- --------------------------------- ----- ------- - - - ------ ------ ------ --- -- - ------ ------ ------ --- -- - ------ ------ ------ --- -- -- -------- --------- - ------ - ------------- ----------------- ----- ------ -- -- -
以上代码会生成一份下拉列表,选项为“选项一”、“选项二”、“选项三”。
组件参数
下面是该组件的一些参数介绍:
options
- 类型:Array
- 必填
自定义选项列表数组。具体格式如下:
- - ------ ------ ------ --- -- - ------ ------ ------ --- -- - ------ ------ ------ --- -- -
id
- 类型:String
组件的唯一标识。
name
- 类型:String
组件的名称。
className
- 类型:String
样式类名称。
disabled
- 类型:Boolean
设置下拉列表是否可用。
multi
- 类型:Boolean
设置下拉列表是否为多选。
onChange
- 类型:Function
选项发生变化时的回调函数。
value
- 类型:Array|String
当前选项的值。
isOpen
- 类型:Boolean
设置下拉列表是否展开。
label
- 类型:String
组件的label。
placeholder
- 类型:String
组件的placeholder。
creatable
- 类型:Boolean
是否支持动态创建选项。
onCreateOption
- 类型:Function
动态创建选项时触发的回调函数。
closeOnSelect
- 类型:Boolean
设置选项选择后是否自动关闭下拉列表。
示例
下面是一些常用示例:
基本使用
------------- ---------- - ------ ------ ------ --- -- - ------ ------ ------ --- -- - ------ ------ ------ --- -- -- --
多选
------------- ---------- - ------ ------ ------ --- -- - ------ ------ ------ --- -- - ------ ------ ------ --- -- -- ----- --
不可用
------------- ---------- - ------ ------ ------ --- -- - ------ ------ ------ --- -- - ------ ------ ------ --- -- -- -------- --
总结
本文介绍了 @beisen-platform/dropdown-list npm包的基本用法,以及常用参数的详细说明,相信读者在使用该组件时会更加得心应手。
参考
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/134346