2022-01-27
Gatsby Theme Aoi のレイアウトを使う
post by cieloazul310
Gatsby Theme Aoi では、MUI で構成されたシンプルなレイアウトコンポーネント (Aoi レイアウト) を利用できます。
基本的な使い方
Aoi レイアウトは @cieloazul310/gatsby-theme-aoi からインポートできます。
embed:ExampleCode-1.tsx
上記のコードで作成したデモページ
Aoi レイアウトの制御
embed:ExampleCode-2.tsx
上記のコードで作成したデモページ
Aoi レイアウトには MUI の Drawer、BottomNavigation、Fab が含まれています。
これらのコンポーネントは、props から画面サイズに応じて表示を制御できます。上記の例では、PermanentDrawer を全ての画面サイズで非表示に、SwipeableDrawer を全ての画面サイズで使えるように、Fab も全ての画面サイズで表示するように設定しています。
componentViewports の値
| key | default |
|---|---|
| swipeableDrawer | 'smDown' |
| permanentDrawer | 'mdUp' |
| bottomNav | 'xsDown' |
| fab | 'smDown' |
viewports の値には boolean 型を取ることができます。
Aoi レイアウトのカスタマイズ
Gatsby テーマ の Shadowing 機能を使うと、Aoi レイアウトを部分的に改造することができます。
次へ
Gatsby Theme Aoi のコンポーネントを使う