画面の端に表示され、コンテンツを開閉することが可能なパネルです。Drawerは、ユーザーにさまざまなオプションや設定にアクセスしたり、特定のタスクを実行したりするために使用できます。
Drawerを使用して、ナビゲーションメニューや検索などの様々なオプションを表示できます。
PC
Drawerを閉じていてもどのようなコンテンツが配置されているかが把握できるよう、 Hover時にTooltipでラベルを確認できるようにしてください。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Drawer.png)
SP
SPは画面サイズの関係で表示できる情報が限られるため、メニューの中に機能を格納し、押下することでメニューをDrawerを開きメニューが見えるように設計しています。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/img02.png)
Properties (振る舞いの設定)
Component Propertiesで設定されている内容。
PC
Drawerの中にTreeコンポーネントを配置して、階層のあるメニューを表現しています。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Drawer02.png)
SP
Drawerの中にListコンポーネントを配置して、階層のあるメニューを表現しています。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/img04.png)