スタック

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

デザイン要素はフレームの下部に固定する必要があります。

原則

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

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

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

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

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

使用状況とプレースメント

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

カード スタック

通知スタック

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

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

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

デザイン要素はフレームの下部に固定する必要があります。 奥行きを使ってフォーカスを示す

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

フレームの下部にデザイン要素を固定

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

タッチ入力に応じて、スタックは垂直方向に移動して一度に 1 つのアイテムを表示できます。

タッチ入力に応じて、スタックをリストに変換して、複数の要素を一度に表示できます。  リストでは、デフォルトのコンテナとフォーカス状態を使用する必要があります。

解剖学

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

バンパーは、スタックの終わりと始まりを強調するのに役立ちます。リリース時にリストを元の位置に戻すスプリング アニメーション。

デザイン要素はフレームの下部に固定する必要があります。

カスタマイズ

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