👇让我们开始吧！

什么是手风琴？

Accordion（也称为扩展面板）是一个垂直堆叠的选项列表，可以展开/折叠以显示或隐藏其他相关内容。

内容

• 手风琴组成部分

• 容器的样式

• 用户体验和可用性

• 案例 📱/💻

手风琴组成部分

状态

手风琴组件的默认状态如下：

• 🔽 收起

• 🔼 展开

• 🖱鼠标悬停

• 👀点击/聚焦

• 🚫 禁用态

  
  

下拉图标的位置

单击选项后，图标会旋转以指示该元素已成功展开。再次单击时，会收起内容，图标返回到其初始位置。

也可以使用这些符号代替下拉箭头：

• 上下箭头

• 三角箭头

• + / -

附加符号icon

手风琴在右侧的情况下，可以使用附加符号来强调含义。

有时也可以使用颜色来区分元素：

容器的样式

突出展开元素

如果使用多个手风琴，则需要突出显示展开状态。通过这种方式，我们可以帮助用户了解打开了哪个手风琴元素。以下是突出显示展开状态的方式：

• 添加模块阴影

• 背景填充

• 轮廓边框

尽管添加阴影在白色和浅灰色表面上看起来很棒，但使用8%～12%黑色透明度的背景也不错；当然，还可以添加轮廓描边。

整体区域的手风琴

在绝大多数情况下，我们常使用的手风琴是在一整个区块，用稍微明显的分隔线来划分它的项目。这种方法将节省一些垂直空间。

分隔区块的手风琴

有时手风琴可以被一些白色的空间隔开，当不需要节省垂直空间时，这种方法很好。

手风琴的可用性

副标题

副标题是一种很好的解决方案，可以在用户点开手风琴之前告知用户会发生什么。通过小标题，您还可以在折叠状态下显示用户的选择。

徽章

徽章是另一种显示手风琴折叠状态下选择了多少项目信息的方式。

辅助文字

在选项元素上添加辅助文字可以灵活的显示出用户在面板收起状态下的选择。

在移动端的常用场景

全屏幕宽度使用

在移动端使用全屏幕宽度来展示手风琴是最常见的做法。

侧边菜单

为了打开子菜单项，将手风琴集成到导航抽屉中。

过滤器

侧边栏和手风琴一起使用可以实现过滤器属性。

在pc端的常用场景

菜单导航

与移动端类似，基于手风琴可以为仪表盘、应用程序等做侧面导航。

过滤器

根据布局的结构，手风琴（例如过滤器）可以位于左侧或右侧。