1. npm 包介绍
@bolt/components-chip-list 是一个基于 React 构建的 Web UI 组件库中的组件，旨在帮助开发者快速构建具备交互性的查询条件列表。
该 npm 包提供了丰富的功能和全面的定制配置项，开发者可以根据实际需求自由选择组合、调整组件的外观和行为。
2. 安装
使用 npm 安装该包：
npm install @bolt/components-chip-list
3. 使用
基本用法
该 npm 包提供了 ChipList 组件。开发者可以在项目中引入该组件，并传入列表数据进行渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -----------------------------
----- -------- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
--
-------- ----- -
------ -
---------
---------------
------------------- -- ---------------- --------- -----------
--
--
-
------ ------- ----上述代码中，我们创建了一个包含三个水果名称的数组，并将其作为 data 属性传递给 ChipList 组件。
结果将得到一个可以点击的水果列表效果，如下图所示：
渲染自定义内容
除了默认渲染的列表项外，我们还可以传递一个 renderChip 属性来渲染自定义的列表项内容。
-- -------------------- ---- -------
-------- ------------ ---- -- -
------ -
---- ------------------------
---- ---------------- --------------- --
----- -----------------------------------
----- -------------------------------------
------
--
-
-------- ----- -
----- -------- - -
- --- -- ----- -------- ------ -- ------ --------------------------------- --
- --- -- ----- --------- ------ -- ------ --------------------------------- --
- --- -- ----- --------- ------ -- ------ --------------------------------- --
--
------ -
---------
---------------
------------------ -- ----------- ----------- ---
------------------- -- ---------------- --------- -----------
--
--
-上述代码中，我们自定义了一个 CustomChip 组件，并在 renderChip 属性中传入该组件。组件通过 data 属性接收传入的数据，并渲染自己的样式。
最终展示效果如下：
设置选中状态
开发者可以通过 selectedIds 属性传递一个数组来设置 ChipList 组件的初始选中状态。
-- -------------------- ---- -------
-------- ----- -
----- -------- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
--
----- ----------- - --- ---
------ -
---------
---------------
-------------------------
------------------- -- ---------------- --------- -----------
--
--
-上述代码中，我们传入了 selectedIds=[2, 3]，表明初始时 Banana 和 Orange 两个选项被选中。
最终展示效果如下：
4. 总结
在本文中，我们学习了 @bolt/components-chip-list npm 包的使用方法。
我们了解了该包提供的基本用法、自定义内容渲染和设置选中状态等功能。这些功能将帮助开发者加速 UI 组件开发，提升项目的开发效率。
同时，我们也了解了该包的深度和学习意义，可以为团队开发提供更加健壮的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa57b5cbfe1ea061046b