# App bars

v-app-bar コンポーネントは、一般的にサイト ナビゲーションのためのメイン基盤を提供し、あらゆるグラフィカル ユーザー インターフェイス (GUI) で極めて重要になるコンポーネントです。 v-app-bar コンポーネントを v-navigation-drawer と組み合わせることで、アプリケーションにサイトナビゲーション機能を持たせることができます。

# 使い方

v-app-barコンポーネントは、アプリケーション全体に関わるアクションや情報を提供するために使用します。

# API

# サブコンポーネント

# v-app-bar-nav-icon

スタイル付きのアイコン ボタン コンポーネントです。v-toolbarv-app-bar で使用するために特別に設計されています。 ツールバーの左側では、通常、ハンバーガー メニューとして表示されます。このメニューはナビゲーション ドロワーの状態を制御するためによく利用されます。 default スロットは、このコンポーネントのアイコンと機能をカスタマイズするために使用できます。 これは 関数型 コンポーネントです。

# v-app-bar-title

shrink-on-scroll prop とともに使用するために特別に変更された v-toolbar-title です。 小さな画面では v-toolbar-title は切り捨てられます (issue #12514 を参照) が、展開したときには絶対位置を使用して全体が表示されます。 shrink-on-scroll はリサイズウォッチャーといくつかの追加を行うため、これを指定せずに v-app-bar-title を使用することはお勧めしません。

# 注意事項

# サンプル

# Props

# 折りたたみ可能なバー

collapsecollapse-on-scroll prop を指定すると、ユーザーが操作するツールバーの状態を簡単に制御できます。

# Dense

app-bar を高密度のスタイルにすることができます。 高密度のアプリバーは、通常より高さが低くなります。

# Elevate on scroll (スクロール時にバーを上げる)

elevate-on-scroll prop を使用する場合、ユーザーが下方向にスクロールし始めるまで、 v-app-bar は 0dp の高さにとどまります。 一度スクロールし始めると、バーは4dpに上がります。

# スクロール時に画像をフェードする

v-app-bar の背景画像は、スクロール時にフェードさせることができます。 それには fade-img-on-scroll prop を使用します。

# スクロール時に非表示にする

v-app-bar はスクロール時に非表示にすることができます。 それには hide-on-scroll prop を指定します。

# Images

v-app-bar には背景画像を含めることができます。 ソースは src prop で設定します。 v-img prop をカスタマイズする必要がある場合のために、app-bar には img スロットが用意されています。

# Inverted scrolling

inverted-scroll prop を指定すると、ユーザーが指定のしきい値を超えてスクロールするまでバーは非表示になります。 指定のしきい値を超えると、v-app-bar は上方向に指定のしきい値を超えてスクロールするまで表示された状態になります。 scroll-threshold の値を指定しない場合、デフォルト値として 0 が使用されます。

# Prominent

v-app-barprominent prop を指定すると、ユーザーが下方向にスクロールしたときに高さを縮めます。 これにより、ユーザーがコンテンツをスクロールし始めたときに画面の視覚的な領域を小さし、スムーズなトランジションを提供できます。 縮小する量として、dense (48px) と short (56px) の 2 つのサイズオプションを指定できます。

# Scroll threshold (スクロールの閾値)

v-app-bar にはスクロールのしきい値を設定できます。 scroll-threshold prop で指定したピクセル数を超えたときにのみスクロールが反応するようになります。

# その他

# メニュー

v-app-bar には、v-menu を追加して機能を簡単に追加することができます。 一番右のアイコンをクリックすると動作を確認できます。

# ナビゲーションドロワーの切り替え

関数型コンポーネントの v-app-bar-nav-icon を使用すると、 v-navigation-drawer のように他のコンポーネントの状態を切り替えることができます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:05/20/2022, 4:10:15 PM