堆栈

堆叠是一种收起的列表,一次只显示一条内容,以堆叠的可视化形式显示,例如通知或卡片。

设计元素应锚定在帧的底部。

原则

堆叠是一种容器组件,因此它们与卡片和列表遵循相同的设计原则:

包含:堆叠将相关信息和操作分组到一个易于理解的单元中。

重点突出且清晰明了:他们以清晰明了的方式呈现内容。

多功能性:堆叠可以显示卡片和通知。

一致的呈现方式:堆叠遵循一致的视觉结构。

使用和放置

堆叠是一种向用户展示列表中有多个元素处于收起状态的方式,同时可最大限度地减少视图中的视觉元素。堆栈有两种不同的变体:

卡片堆叠

通知堆叠

堆栈是一种容器组件,这两个版本在功能或外观上没有区别。

两者在外观和行为上应几乎完全相同。堆栈是这些控件的容器,内置了分页逻辑。

用户可以通过在触控板上向前和向后滑动或拖动来导航。 滚动堆栈时,一次只能移动一项内容。

设计元素应锚定在帧的底部。 使用深度来指示焦点

较低堆叠项的深度为 0,而最上面的项的深度为 +2。

将设计元素锚定到框架底部

堆栈可以一次遍历一个项目

在收到触控输入后,堆叠能够通过垂直移动一次呈现一个项。

在收到触控输入时,堆栈能够变成列表,以便一次显示多个元素。该列表应使用默认容器和焦点状态。

解剖学

堆栈始终会折叠为分页组件。除非存在嵌套的已启用按钮,否则顶部项始终是主要焦点,显示较深的边框深度。

缓冲有助于加强堆栈的开头和结尾。一种弹簧动画,可在释放时将列表快速恢复到原位。

设计元素应锚定在帧的底部。

自定义

堆栈具有内置的遮罩、分页和动画,无法自定义。而是堆栈中的内容是自定义的。