feat: 画面セーフエリア対応

[chika3742]

概要

v-safe-areaディレクティブを作成し、セーフエリア分のパディングを入れたい要素に以下のようにv-safe-areaと記述することで自動的にパディングが追加される。

<div v-safe-area />

paddingの値は上書きされるため、以下のようにpaddingの最小値を指定することも可能 (単位: px)。

<div v-safe-area="{bottom: 16}" />

セーフエリア分のパディングを入れない方向には、falseを指定することで無効化できる。

<div v-safe-area="{top: false}" />

これを用いて、以下のコンポーネントにセーフエリア対応を施した。

• app.vue内のv-container
• ナビゲーションドロワー
• フッター
• RelicBookmarkDialogコンポーネント
• SearchDialogコンポーネント

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	b596c4a
Status:	✅  Deploy successful!
Preview URL:	https://6e75540c.hsr-material.pages.dev
Branch Preview URL:	https://feat-225.hsr-material.pages.dev

View logs