スタック

スタックは、通知やカードなどのスタック表示で、一度に 1 つのコンテンツのみを表示する折りたたみ可能なリストです。

原則

Stack はコンテナ コンポーネントであるため、カードやリストと同じ設計原則を共有します。

Containment（包含）: 関連する情報とアクションを 1 つのわかりやすい単位にグループ化します。

焦点と明瞭さ: コンテンツを明確かつ焦点の定まった方法で提示します。

汎用性: スタックにはカードと通知を表示できます。

一貫性のあるプレゼンテーション: スタックは一貫性のある視覚構造に従います。

使い方と配置

スタックは、リスト内の複数の要素が折りたたまれていることをユーザーに示しつつ、表示される視覚要素を最小限に抑える方法です。スタックには次の 2 つのバリエーションがあります。

• カード スタック

• 通知スタック

スタックはコンテナ コンポーネントであり、どちらのバージョンも動作や外観に違いはありません。

どちらも見た目と動作はほぼ同じです。スタックは、これらのコントロールのコンテナであり、ページネーション用のロジックが組み込まれています。

スタック ナビゲーション

ユーザーは、タッチパッド上で前後にスワイプまたはドラッグして移動します。スタックをスクロールすると、一度に 1 つのアイテムのみが移動します。

スタックは一度に 1 つのアイテムをトラバースできます。

タッチ入力に応じて、スタックは垂直方向に移動して一度に 1 つのアイテムを表示したり、一度に複数の要素を表示するリストになったりします。リストでは、デフォルトのコンテナとフォーカス状態を使用する必要があります。

奥行きを使用してフォーカスを示す

スタックの下位のアイテムは深度 0 を使用し、最上位のアイテムは深度 +2 を使用します。

解剖学

スタックは常にページネーション コンポーネントとして折りたたまれます。ネストされた有効なボタンがない限り、一番上の項目が常にプライマリ フォーカスとなり、境界線の奥行きがより強く表示されます。

スタックの先頭または末尾をスワイプすると、標準のストレッチ アニメーションが表示され、スタックの先頭または末尾が強調されます。

カスタマイズ

スタックには、カスタマイズできないスクリム、ページング、アニメーションが組み込まれています。スタック内のコンテンツがカスタマイズされます。