# Tabs

v-tabsコンポーネントは、選択可能なアイテムの背後にコンテンツを隠すために使用されます。 これは、タブがリンクであり、tab-items がコンテンツであるページの疑似ナビゲーションとしても使用できます。

# 使い方

v-tabs コンポーネントは v-item-group のスタイル付き拡張です。 コンテンツのグループを管理するための使いやすいインターフェイスを提供します。

# API

# 注意事項

# サンプル

# Props

# Align with title

align-with-title propを使用して、v-tabsv-toolbar-title コンポーネントに並べます。 (v-app-bar-nav-icon または v-btnv-toolbar で使用する必要があります)。

# Center active

center-active prop は、アクティブなタブを常に中央にします。

# カスタムアイコン

prev-iconnext-icon をカスタムペジネーションアイコンに適用できます。

# Fixed tabs

fixed-tabs プロパティは、 v-tab を最大幅(300px) までのすべての利用可能なスペースを占有するように強制します。

# Grow

grow prop を使用すると、タブ項目は最大幅300pxまでのすべての利用可能なスペースを占めるようになります。

# アイコンとテキスト

icons-with-text プロパティを使用すると、アイコンとテキストの両方が使用できるように、 v-tabs の高さが 72px になります。

# Pagination

タブ項目がコンテナにオーバーフローすると、デスクトップではページネーションコントロール表示されます。 モバイルデバイスでは、矢印は show-arrows プロパティでのみ表示されます。

# Vertical タブ

vertical prop で、 v-tab コンポーネントを垂直にスタックすることができます。

# その他

# Content

v-toolbarextension スロットに v-tabs を入れるのが一般的です。 v-toolbartabs prop を使用すると、高さを v-tabs に合わせて48px に調整します。

# デスクトップタブ

単一のアイコンを使用して、 v-tab のアクションを表すことができます。 コンテンツを各タブに関連付けやすい場合に便利です。

# 動的高さ

v-tab-itemを変更すると、コンテンツエリアはスムーズに新しいサイズに拡大されます。

# Dynamic Tabs

Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs component will react. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all v-tabs and the slider will disappear.

# Overflow to menu

You can use a menu to hold additional tabs, swapping them out on the fly.

# タブアイテム

v-tabs-items コンポーネントでは、タブごとにコンテンツをカスタマイズできます。 Shared v-modelを使用すると、 v-tabs-items は現在選択されている v-tab と同期します。

準備はできましたか?

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