Vuetify

ショップ

企業向け

v-toolbarコンポーネントは、一般的にサイトナビゲーションの主要なソースであるため、あらゆるGUIにとって極めて重要です。ツールバーコンポーネントは、 v-navigation-drawer および v-card と組み合わせて使用​​すると効果的です。

ツールバーはさまざまな方法で柔軟に使えるコンテナです。デフォルトでは、ツールバーの高さはデスクトップでは64px、モバイルでは56pxです。ツールバーで使用できるヘルパーコンポーネントがいくつかあります。v-toolbar-titleはタイトルを表示するために使われ、v-toolbar-itemsv-btn が高さ全体を拡張できるようにします。

Options

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

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

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.

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

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