Vuetify

ショップ

企業向け

'v-tabs' コンポーネントは、選択可能な項目の背後にあるコンテンツを非表示にするために使用されます。これは、タブがリンクであり、タブ項目がコンテンツであるページの擬似ナビゲーションとしても使用できます。

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

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

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

fixed-tabs prop は v-tab が最大幅 (300px) までのスペースを占有するように強制します。

Active tab is always centered

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.

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

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

ページネーション用アイコンはprev-iconおよびnext-iconで設定できます。

v-tabコンポーネントを垂直に積み重ねることができます。

v-tabはテキストだけでなく、アイコンを含めることができます。これにより v-tabsの高さが 72px に増加します。

right propを使用すると、タブを右寄せにします。

It is common to put v-tabs inside the extension slot of v-toolbar. Using v-toolbar's tabs prop auto adjusts its height to 48px to match v-tabs.

Make v-tabs lined up with the v-toolbar-title component (v-app-bar-nav-icon or v-btn must be used in v-toolbar).

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.

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

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

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

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