组件 扩展面板

扩展面板

扩展面板中包括创建流程以及进行简单的编辑。

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

它可以用于多种任务,例如:

  • 编辑设置项
  • 创建广告活动的工具

用法

编辑
创作流程

行为

展开
折叠
聚焦

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

编辑

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

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

创作流程

扩展面板可以按顺序来展示,以此形成一个创作流程。

例如,创建广告活动时,可以展示一系列的扩展面板来聚合活动细节。

各种扩展面板

列表内容

15sp Roboto Regular
87% black

次要内容

12sp Roboto Regular
54% black

分隔线

1dp 粗细
12% black

展开图标

24x24dp
38% black

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

折叠的面板

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

折叠的面板示例

展开的面板

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

面板上可以添加提示文本来帮助用户。

展开的面板示例

聚焦状态

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

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

背景色

Grey 200

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

24dp x 24dp
54% black

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

标签

  • 字体:15sp Roboto Regular

边距

  • 上下边距:16dp
  • 左右边距:24dp