# Toolbars

v-toolbar コンポーネントは、一般にサイトナビゲーションの主要なソースであるため、あらゆるグラフィカルユーザーインターフェイス (GUI) にとって極めて重要です。 ツールバーコンポーネントは、 v-navigation-drawerv-card と組み合わせて使用できます。

# 使い方

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

# API

# 注意事項

# サンプル

# Props

# Background

src プロパティを使用すると、ツールバーは単色ではなく背景を表示できます。 これは img スロットを使用し、独自の v-img コンポーネントを提供することでさらに変更できます。 背景はv-app-bar を使ってフェードできます。

# Collapse

ツールバーは、画面のスペースを節約するために折りたたむことができます。

# Dense toolbars

高さを _48px_に縮小します。 prominent プロパティと組み合わせて使用すると、高さが 96px に減ります。

# Extended

ツールバーは extension スロットを使用せずに拡張できます。

# Extension height

拡張したときの高さはカスタマイズできます。

# ライトとダーク

ツールバーには、ライトとダークの2つのバリエーションがあります。 lightツールバーには暗い色のボタンと暗いテキストがあり、darkツールバーには白い色のボタンと白いテキストがあります。

# Prominent toolbars (目立つツールバー)

Prominent ツールバーは v-toolbar の高さを 128px に増やし、v-toolbar-title をコンテナの下の方に配置します。 v-app-barではこれを拡張させ、prominent ツールバーを密集あるいは短くできるようになりました。

# その他

# コンテキストによって変わるバー

アプリの状態の変化に応じてツールバーの見た目を変えることができます。 この例では、v-select でユーザーが選択した内容に応じて、ツールバーの色と内容が変化します。

# フレキシブル・カード・ツールバー

この例では、extended propを使って、ツールバーの拡張されたコンテンツ領域にカードを埋め込んでいます。

# バリエーション

v-toolbar には、テーマやヘルパークラスで適用できる複数のバリエーションがあります。 これらはライト/ダークテーマ、色付き/透明など様々なバリエーションを持っています。

準備はできましたか?

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