Vuetify

ショップ

企業向け

v-app-bar は、一般にサイトナビゲーションとして一番最初に使われるため、どんな GUI にとっても重要なコンポーネントです。app-bar コンポーネントは、v-navigation-drawer と連携して、あなたのアプリケーションにサイトナビゲーションを提供します。

v-app-bar コンポーネントは、アプリケーション全体のアクションと情報に対して使用します。

Options
  • v-app-bar-nav-icon: v-toolbar およびv-app-barで使用するために特別に作成されたスタイル付きアイコンボタンコンポーネント。通常、ハンバーガーメニューとしてツールバーの左側に表示され、ナビゲーションドロワーの状態を制御するためによく使用されます。 defaultスロットで、このコンポーネントのアイコンと機能をカスタマイズできます。

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

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

app-bar を密集させることができます。密集したアプリバーは、通常のアプリバーよりも高さが低くなります。

「prominent」プロップを持つ「v-app-bar」は、ユーザーが下にスクロールするときに高さを縮小することを選択できます。これにより、ユーザーがコンテンツをスクロールしているときに、表示スペースを少なくするためのスムーズな移行が提供されます。シュリンクの高さには、圧縮された(48px)サイズと 短い(56px)サイズの2つのオプションがあります。

srcプロップにソースを設定することで「v-app-bar」に背景画像を含めることができます。v-imgプロパティをカスタマイズする必要がある場合は、アプリバーが提供している img スロットを使います。

v-app-bar はスクロール時に隠すことができます。この機能を利用するには、hide-on-scroll プロパティを使用してください。

collapsecollapse-on-scroll props を使用すると、ユーザーがインタラクトするツールバーの状態を簡単にコントロールできます。

elevate-on-scroll prop を使用すると、ユーザーが下にスクロールするまで v-app-bar 0dp で持ち上がります。スクロールを始めると、バーは 4dp まで上がります。

inverted-scroll プロパティを使用すると、ユーザーが指定されたしきい値を超えるまでバーが非表示になります。しきい値を超えると、ユーザーがしきい値を超えてスクロールアップするまで「v-app-bar」が表示され続けます。 scroll-threshold 値が指定されていない場合、デフォルト値0が使用されます。

機能的なコンポーネントv-app-bar-nav-iconを使用すると、v-navigation-drawer などの他のコンポーネントの状態を切り替えることができます。

v-app-bar にはスクロールのしきい値を設定できます。scroll-threshold プロパティに指定したピクセル値の合計を超えるまでスクロールしたときに初めてスクロールに反応するようになります。

スクロール時にフェードする v-app-bar のバックグラウンド画像です。この機能を利用するには、fade-img-on-scroll プロパティを使用してください。

app bar は、VMenu を加えるだけで簡単に拡張できます。拡張した動作を見るには、アクションの最後のアイコンをクリックしてみてください。

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

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