堆栈

堆叠是一种收起的列表,一次只显示一条内容,以堆叠的视觉效果呈现,例如通知或卡片。

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

原则

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

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

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

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

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

使用和放置

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

卡片堆叠

通知堆叠

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

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

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

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

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

设计元素应锚定到帧的底部。 堆栈可以一次遍历一个项目

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

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

解剖学

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

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

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

自定义

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