组件 扩展面板

扩展面板

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

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

它可以用于不同的任务,例如:

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

用法

编辑
创建流程

行为

展开
折叠
聚焦

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

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

编辑

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

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

创建流程

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

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

各种扩展面板

列表内容

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.

折叠的面板

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

折叠的面板示例

展开的面板

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

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

展开的面板示例

聚焦状态

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

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

背景色

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