ショップ

企業向け

ボトムシートは、画面の下部からスライドする変更されたv-dialogで、 v-bottom-navigationと同様です。ボトムナビゲーション コンポーネントはボタンと特定のアプリケーション レベルアクション用ですが、ボトムシートには何でも含めることができます。

アプリケーションでよく使われるアクションの例を下に示します。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

永続的な(Persistent)ボトムシートは、外側をクリックしても閉じることはできません。

ボトムシートはv-modelで制御できます。activator slotを使用できない場合などに使用します。

Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width prop.

Insetボトムシートを使用すると、シンプルな音楽プレーヤーなどの実用的なコンポーネントを作ることができます。

機能をもつリストをボトムシートに結合することで、単純なopen inコンポーネントを作成できます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!