v-tabs 컴포넌트는 선택가능한 아이템의 뒤로 컨텐츠를 숨기는데 사용됩니다. 탭은 페이지 내에서 탭이 링크이고 탭-아이템이 컨텐츠인 것 처럼 유사-탐색(pseudo-navigation)으로 사용될 수 있습니다.


The v-tabs component is a styled extension of v-item-group. It provides an easy to use interface for organizing groups of content.



Fixed tabs

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

Centered active tab

Active tab is always centered


grow prop을 사용하면 탭 아이템 들이 사옹가능한 모든 공간을 사용합니다.

페이지네이션 (Pagination)

탭 아이템들이 컨테이너를 넘어설(overflow) 경우 페이지네이션으로 표시를 조절할 수 있습니다.

커스텀 아이콘 (Custom icons)

prev-iconnext-icon를 사용하여 커스텀 페이지네이션 아이콘을 적용할 수 있습니다.

Vertical Tabs

Tabs can be toggled to stack its v-tab components vertically.

Icons and text

v-tab's can contain icons as well as text. This increases the v-tabs height to 72px.

오른쪽으로 정렬된 탭 (Right aligned tabs)

right prop은 탭들을 오른쪽으로 정렬합니다.

컨텐츠 (Content)

v-tabs 컴포넌트에 넣을 수 있는 건 탭뿐이 아닙니다. 이 예제에서는 툴바를 추가합니다.

Align tabs with toolbar title

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).

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.

데스크톱 탭 (Desktop tabs)

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

With menu

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

Edit this page | language on Github
상점For Enterprise