# Toolbars
v-toolbar コンポーネントは、一般にサイトナビゲーションの主要なソースであるため、あらゆるグラフィカルユーザーインターフェイス (GUI) にとって極めて重要です。 ツールバーコンポーネントは、 v-navigation-drawer と v-card と組み合わせて使用できます。
# 使い方
ツールバーはさまざまな方法で使用できる柔軟なコンテナです。 デフォルトでは、ツールバーはデスクトップでは64px、モバイルでは高さ56pxです。 ツールバーで使用できるヘルパーコンポーネントがいくつかあります。 v-toolbar-title はタイトルを表示するために使用され、 v-toolbar-items は v-btn をフルheightに拡張するために使用されます。
# API
# 注意事項
v-toolbar と v-app-bar の内部で v-btn が使用されると、自動的にサイズが大きくなり、ネガティブマージンが適用され、Material Design Specificationに従って適切な間隔が確保されます。 ボタンを div のようなコンテナで囲む場合、適切に配置するためにはそのコンテナにマイナスのマージンをかける必要があります。
# サンプル
# Props
# Background
src プロパティを使用すると、ツールバーは単色ではなく背景を表示できます。 これは img スロットを使用し、独自の v-img コンポーネントを提供することでさらに変更できます。 背景はv-app-bar を使ってフェードできます。
# Collapse
ツールバーは、画面のスペースを節約するために折りたたむことができます。
# Dense toolbars
高さを _48px_に縮小します。 prominent プロパティと組み合わせて使用すると、高さが 96px に減ります。
# Extended
ツールバーは extension スロットを使用せずに拡張できます。
# Extension height
拡張したときの高さはカスタマイズできます。
# Floating with search
フローティングツールバーは、必要な分しかスペースを取らないインライン要素に変わります。 これはコンテンツ上にツールバーを配置する場合に特に便利です。
# ライトとダーク
ツールバーには、ライトとダークの2つのバリエーションがあります。 lightツールバーには暗い色のボタンと暗いテキストがあり、darkツールバーには白い色のボタンと白いテキストがあります。
# Prominent toolbars (目立つツールバー)
Prominent ツールバーは v-toolbar の高さを 128px に増やし、v-toolbar-title をコンテナの下の方に配置します。 v-app-barではこれを拡張させ、prominent ツールバーを密集あるいは短くできるようになりました。
# その他
# コンテキストによって変わるバー
アプリの状態の変化に応じてツールバーの見た目を変えることができます。 この例では、v-select でユーザーが選択した内容に応じて、ツールバーの色と内容が変化します。
# フレキシブル・カード・ツールバー
この例では、extended propを使って、ツールバーの拡張されたコンテンツ領域にカードを埋め込んでいます。
# バリエーション
v-toolbar には、テーマやヘルパークラスで適用できる複数のバリエーションがあります。 これらはライト/ダークテーマ、色付き/透明など様々なバリエーションを持っています。