# Tabs

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

# 使い方

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

# API

# 注意事項

# サンプル

# Props

# Align with title

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

# Center active

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

# カスタムアイコン

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

# Fixed tabs

The fixed-tabs prop forces v-tab to take up all available space up to the maximum width (300px).

# Grow

The grow prop will make the tab items take up all available space up to a maximum width of 300px.

# アイコンとテキスト

Using icons-and-text prop increases the v-tabs height to 72px to allow for both icons as well as text to be used.

# Pagination

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

# Vertical タブ

The vertical prop allows for v-tab components to stack vertically.

# その他

# Content

v-toolbar の extension スロットに v-tabs を入れるのが一般的です。 Using v-toolbar's tabs prop auto adjusts its height to 48px to match v-tabs.

# デスクトップタブ

You can represent v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.

# 動的高さ

When changing your v-tab-item, the content area will smoothly scale to the new size.

# 動的なタブ

タブを動的に追加および削除することができます。 This allows you to update to any number and the v-tabs component will react. この例では、新しいタブを追加すると、それに合わせてモデルも自動的に変更されます。 さらにタブを追加してコンテナからはみ出すと、選択されたアイテムが自動的にスクロールして表示されます。 Remove all v-tabs and the slider will disappear.

# オーバーフローしたものはメニューに

メニューを使って追加のタブを保持し、その場で入れ替えることができます。

# タブアイテム

The v-tabs-items component allows for you to customize the content per tab. Using a shared v-model, the v-tabs-items will sync with the currently selected v-tab.

準備はできましたか？

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