组件– 展开面板

展开面板

扩展面板的功能包括创建流程、进行简单的编辑。

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

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

  • 编辑设置项
  • 创建广告系列的工具
用法

编辑
创建流程

行为

展开
折叠
聚焦

Material Design 中的扩展面板功能与流程编辑

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

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

编辑

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

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

创建流程

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

例如，一个用于创建广告系列的工具，可以显示一系列的扩展面板以收集广告系列的详细信息。

Material Design 中的扩展面板

各种扩展面板

列表内容

15sp Roboto Regular
87% black

副内容

12sp Roboto Regular
54% black

分隔线

1dp border
12% black

扩展图标

24dp x 24dp
38% black

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

折叠的面板

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

Material Design 的折叠面板示例

折叠的面板示例

展开的面板

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

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

Material Design 的展开面板示例

展开的面板示例

聚焦状态

扩展面板可以使用聚焦状态（在列表项上添加灰色背景）来为单个列表项提供焦点。

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

聚焦状态下的 Material Design 扩展面板列表项

背景色

Grey 200

鼠标悬浮和按下时的扩展图标

24dp x 24dp
54% black

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

标签

  • 字体：Roboto Regular 15sp

边距

  • 上下边距：16dp
  • 左右边距：24dp
Material Design 中的扩展面板的字体和边距规格说明