v-toolbarコンポーネントは、一般的にサイトナビゲーションの主要なソースであるため、あらゆるGUIにとって極めて重要です。ツールバーコンポーネントは、 v-navigation-drawer および v-card と組み合わせて使用すると効果的です。
ツールバーはさまざまな方法で柔軟に使えるコンテナです。デフォルトでは、ツールバーの高さはデスクトップでは64px、モバイルでは56pxです。ツールバーで使用できるヘルパーコンポーネントがいくつかあります。v-toolbar-titleはタイトルを表示するために使われ、v-toolbar-items はv-btn が高さ全体を拡張できるようにします。
icon propsを使用している <v-btn> を v-toolbar および v-app-bar 内で使用すると、自動的にサイズを大きくし、マテリアルデザインの仕様に従って負のマージンを適用することで、適切な間隔を確保します。<div> などのコンテナでボタンをラップする場合、ボタンを適切に配置するには、そのコンテナに負のマージンを適用する必要があります。
以下に、簡単な例から複雑な例まで示します。
Prominent toolbars increase the v-toolbar's height to 128px and positions the v-toolbar-title towards the bottom of the container. This is expanded upon in v-app with the ability to shrink a prominent toolbar to a dense or short one.
Dense toolbars reduce their height to 48px. When using in conjunction with the prominent prop, will reduce height to 96px.
ツールバーには、lightとdarkの 2種類 があります。lightツールバーには暗い色調のボタンと暗いテキストがあり、darkツールバーには白い色調のボタンと白いテキストがあります。
v-toolbar には、テーマやヘルパークラスを使って適用できる複数のバリエーションがあります。これらは、light / darkテーマ、色付き、透明など、さまざまなバリエーションを持っています。
ツールバーは、ソリッドカラーではなく背景を表示することができます。これは img スロットを使用して、独自の v-img コンポーネントを提供することで変更することができます。背景は、v-app-bar コンポーネントを使用してフェードすることができます。
ツールバーは extension スロットを使わずに拡張することができます。
The extension's height can be customized.
ツールバーは、画面のスペースを節約するために折りたたむことができます。
この例では、extended propを使用して、ツールバーの拡張コンテンツ領域にカードをオフセットしています。
フローティングツールバーは、必要なだけのスペースを取るインライン要素に変わります。これは、コンテンツの上にツールバーを配置する場合に特に便利です。
It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the v-select.