折叠面板

折叠面板适用于创建流程引导和进行简单编辑等场景。

折叠面板是一个轻量级的容器，可以单独存在，也可以连接到一个更大的平面上，比如卡片。

它可以用于不同的任务，例如：

编辑设置项
创建营销活动的工具

用法

编辑
创建流程

行为

展开
折叠
聚焦

用法

折叠面板是一个轻量级的容器，可以单独存在，也可以连接到一个更大的平面上，比如卡片。

编辑

折叠面板最适合用于进行简单的编辑，例如选择设置项的值。

例如，包含表格的应用可以使用折叠面板来调整表格元素的设置。

创建流程

折叠面板可以按顺序显示以形成创建流程。

例如，一个用于创建营销活动的工具，可以显示一系列的折叠面板以收集营销活动的详细信息。

列表内容

15sp Roboto Regular
87% black

辅助文本

12sp Roboto Regular
54% black

分隔线

1dp border
12% black

扩展图标

24dp x 24dp
38% black

行为

折叠的面板

折叠的面板只显示摘要信息。选择一个折叠的面板后，它会展开以显示完整的折叠面板。

展开的面板

折叠的面板被选择后会展开，允许用户添加或编辑信息。

可能会添加一些帮助文本到面板上，来协助用户。

聚焦状态

折叠面板可为列表项设置聚焦状态（例如添加灰色背景），来表示其获得了焦点。

在键盘上，用户可以使用 Tab 键来遍历列表项。

聚焦状态下的 Material Design 折叠面板列表项 — **背景色**
Grey 200
**鼠标悬浮和按下时的扩展图标**
24dp x 24dp
54% black

规格

标签

字体：Roboto Regular 15sp

内边距

上下内边距：16dp
左右内边距：24dp

折叠面板适用于创建流程引导和进行简单编辑等场景。

用法

行为

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

折叠的面板

展开的面板

聚焦状态

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

用法

行为

规格