# Banners

v-banner コンポーネントは、ユーザーに対する中間の割り込みメッセージとして使用できます。ユーザーに1〜2つ、アクションを尋ねることができます。 single-line と暗黙的な multi-line の2つのバリエーションがあります。いずれも、メッセージやアクションとともにアイコンを使用できます。

# 使い方

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

# API

v-banner

# サンプル

# Props

# Single line

single-line の v-banner は、少量の情報表示に使用します。デスクトップ向けの実装にのみ推奨されます。オプションで sticky prop を指定することができます。これを指定すると、バナーのコンテンツがスクリーンに固定されます (注意: IE11 では動作しません)。詳しくは、sticky positioning を参照してください。

# イベント

# アイコンをクリックしたとき

v-banner では、アイコンをクリックすると click:icon イベントが発生します。これはカスタムのアイコンスロットがある場合でも発生します。

# Slots

# Actions

actions スロットには dismiss 機能があり、スコープ内でバナーを簡単に閉じることができます。

# Icon

アイコンスロットを使用すると、バナー内のコンテンツや機能を明示的にコントロールすることができます。

# その他

# Two line

two-line の v-banner には、より長いデータを収めることができます。メッセージが長い場合に使用します。 モバイル向けの実装で推奨されます。

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:11/12/2024, 6:59:50 AM