本文介绍如何使用 npm 包 @reach/accordion，实现页面上的手风琴效果。
什么是手风琴
手风琴，又称手风琴门，是指可以折叠并显示部分内容的交互组件。通常用于展示一组相关内容，实现页面的内容分类和懒加载。
@reach/accordion
@reach/accordion 是一个基于 React 的手风琴组件库。它支持多种配置，包括手风琴的样式、动画、默认展开的面板等。同时，它也提供了很多可自定义的属性，方便开发者对组件进行个性化修改。
使用教程
安装
使用 npm 安装：
npm install @reach/accordion
使用
使用较为简单，只需要引用 Accordion 和 AccordionItem 两个组件即可。
-- -------------------- ---- ------- ------ - ---------- ------------- - ---- ------------------ ------ ----------------------------- ----------- --------------- ------------ ---------- ---------------- --------------- ------------ ---------- ---------------- ------------展开代码
在 AccordionItem 组件中可以传递多余的 props 进行个性化修改。
<AccordionItem className="my-item" icon={<img src="icon.png" alt="icon" />} > <h2>面板标题</h2> <p>面板内容</p> </AccordionItem>
其中，icon 参数用于设置每个 AccordionItem 右侧的图标，className 参数用于自定义样式。
属性
Accordion 和 AccordionItem 组件都有一些常用的属性。
Accordion 属性
| 属性名 | 描述 | 类型 |
|---|---|---|
| collapsible | 是否允许所有面板都关闭 | bool |
| multiple | 是否允许同时展开多个面板 | bool |
| defaultIndex | 默认展开的面板索引，从 0 开始 | number/array |
| onChange | 面板展开/关闭时的回调函数 | function |
| className | 样式类名 | string |
| style | 自定义样式 | object |
| ...otherAttributes | 其他可自定义属性，如 data-xx、aria-label 等。 |
AccordionItem 属性
| 属性名 | 描述 | 类型 |
|---|---|---|
| disabled | 是否禁用本面板 | bool |
| expanded | 是否展开本面板 | bool |
| icon | 右侧图标 | React.Element |
| onSelect | 点击本面板时的回调函数 | function |
| className | 样式类名 | string |
| style | 自定义样式 | object |
| ...otherAttributes | 其他可自定义属性，如 data-xx 等。 |
示例
下面是一个简单的示例，展示如何使用该组件实现一个带图标的手风琴菜单。
-- -------------------- ---- ------- ------ - ---------- ------------- - ---- ------------------ ------ ----------------------------- ----- --- - -- -- - ----- ----- - - ----- ----- ----- ----- - ------ - ----------- ----------------- ------ -- - -------------- -------------------------- ------------ ------ ------ - ------- ---- ------ ------ ------ ------ ------ ------ ----- ---------------- --- ------------ - - ------ ------- ---展开代码
总结
@reach/accordion 是一个基于 React 的手风琴组件库，用于实现页面上的手风琴效果。它提供了多种配置参数和可自定义属性，方便开发者进行个性化修改。如果你需要实现手风琴效果，那么这个库将是一款不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb09db5cbfe1ea06110e3
