The v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

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

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

fixed-tabs prop 은 더 높은 최소 너비를 설정하고 새로운 최대 너비를 v-tabs-item에 적용합니다. 데스크탑 스크린에서, 탭 아이템은 v-tabs 컴포넌트위 중앙에 표시되고, 모바일에선 균등하게 채워집니다.

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.

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

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

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

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

icons-and-text prop을 이용해 각 탭 아이템에 아이콘을 추가할 수 있습니다.

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

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

v-tabsv-toolbar-title 컴포넌트와 함께 나열합니다. (v-app-bar-nav-iconv-btn 컴포넌트가 v-toolbar 안에 사용되어야만 합니다. May not work if the tab text is wrapped.

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.

메뉴가 추가적인 탭들을 가지고 그들을 동적으로 바꿀 수 있도록 할 수 있습니다.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

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