Material Design コンポーネントまとめてみた Bottom sheets編

Bottom sheets探してみた

ボトムシートは、画面下部に固定されたセカンダリー・コンテンツを表示する。

□ 公式に書かれていること

⚡コンパクトサイズとミディアムサイズウインドウにボトムシートを使用
標準とモーダルの2種類
⚡コンテンツはアプリのメインコンテンツではないこと
⚡ボトムシートがメインの画面コンテンツや機能に干渉しないように、ユーザーが必要な時に閉じたり、非表示にすることができるということを意味しています。

□ よくある使い方と特徴

• Bottom sheetには、モバイル画面上の補足コンテンツとアクションが表示されます。

• Bottom sheetは、メニュー項目 (リストまたはグリッド レイアウトの)、アクション、補足コンテンツなど、さまざまな情報とレイアウトを含めることができる多用途のコンポーネントです。

□ 利点：追加情報やアクションの提供

• Bottom sheetはメインコンテンツの上にオーバーレイとして表示されるため、ユーザーに追加の情報やオプションを提供するのに便利です。これにより、主要な画面のデザインを乱すことなく、追加のコンテンツや機能をユーザーに提示することができます。

✨スタイル

1. Container

2. Drag handle(option)

3. Scrim

以上！次回はSide sheetについてまとめていきます！

参考
引用元 Google - Material Design
URL：https://material.io/