# App bars
v-app-bar コンポーネントは、一般的にサイト ナビゲーションのためのメイン基盤を提供し、あらゆるグラフィカル ユーザー インターフェイス (GUI) で極めて重要になるコンポーネントです。 v-app-bar コンポーネントを v-navigation-drawer と組み合わせることで、アプリケーションにサイトナビゲーション機能を持たせることができます。
# 使い方
v-app-barコンポーネントは、アプリケーション全体に関わるアクションや情報を提供するために使用します。
# API
# サブコンポーネント
# v-app-bar-title
shrink-on-scroll prop とともに使用するために特別に変更された v-toolbar-title です。 小さな画面では v-toolbar-title は切り捨てられます (issue #12514 を参照) が、展開したときには絶対位置を使用して全体が表示されます。 shrink-on-scroll はリサイズウォッチャーといくつかの追加を行うため、これを指定せずに v-app-bar-title を使用することはお勧めしません。
# 注意事項
icon prop を指定した v-btn を v-toolbar と v-app-bar の中で使用している場合、Material Design Specification に沿って適切な間隔を確保するため、これらのバーのサイズが自動的に拡大され、負のマージンが適用されます。 ボタンを div のようなコンテナで囲む場合、適切に配置するためにはそのコンテナにマイナスのマージンをかける必要があります。
# サンプル
# Props
# 折りたたみ可能なバー
collapse と collapse-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-bar に prominent 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 のように他のコンポーネントの状態を切り替えることができます。