堆疊

堆疊是收合清單，一次只會顯示一則內容，以堆疊視覺效果呈現，例如通知或資訊卡。

原則

Stack 是容器元件，因此與資訊卡和清單共用設計原則：

包含：堆疊會將相關資訊和動作分組，方便使用者一次查看。

清楚且有焦點：清楚呈現內容，並突顯重點。

多功能：堆疊可顯示資訊卡和通知。

一致的呈現方式：堆疊會遵循一致的視覺結構。

使用方式與刊登位置

堆疊可向使用者顯示清單中有多個摺疊元素，同時盡量減少檢視畫面中的視覺元素。堆疊有兩種不同變體：

資訊卡堆疊

通知堆疊

堆疊是容器元件，兩個版本在運作方式或外觀上沒有差異。

兩者應看起來幾乎相同，運作方式也一樣。堆疊是這些控制項的容器，內建分頁邏輯。

使用者可以向前或向後滑動或拖曳觸控板來瀏覽內容。捲動堆疊時，一次只會移動一個項目。

使用深度表示焦點

堆疊底部的項目深度為 0，最頂端的項目深度則為 +2。

堆疊可一次遍歷一個項目

在觸控輸入時，堆疊可透過垂直移動一次呈現一個項目。

在觸控輸入時，堆疊可以變成清單，一次顯示多個元素。清單應使用預設容器和焦點狀態。

圖解

堆疊一律會以分頁元件的形式摺疊。除非有巢狀已啟用按鈕，否則最上方的項目一律是主要焦點，顯示較深的邊框深度。

串場廣告有助於強化堆疊的開頭和結尾。彈簧效果，可在放開後將清單彈回原位。

自訂

堆疊內建的半透明遮罩、分頁和動畫無法自訂。 而是自訂堆疊中的內容。