Vuetify

ショップ

企業向け

v-bannerコンポーネントは、1-2個のアクションを持つ、ユーザーへの中間割り込みメッセージとして使用されます。 single-linemulti-line(暗黙)の2つのバリエーションがあります。これらには、メッセージやアクションで使用できるアイコンを含めることができます。

バナーには、1〜2行のテキスト、アクション、およびアイコンを含めることができます。

Options

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

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

Single-line VBannerは少量の情報に使用され、デスクトップのみの実装に推奨されます。必要に応じてsticky propを有効にして、コンテンツが画面に固定されていることを確認できます(注:IE11では動作しません)。スティッキーポジショニングの詳細については、 sticky positioning here をご覧ください。

Two-line VBannerはより長いメッセージに使用できます。

アイコンスロットでは、その中のコンテンツや機能を明示的にコントロールすることができます。

VBannerは、カスタムアイコンスロットがある場合でも、アイコンのクリック時に click:icon イベントを発生させます。

actions slotのスコープにはdismiss関数があり、これを使用してバナーを簡単に閉じることができます。

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

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