탭

탭 (Tabs)

출처: 문서

본문

서로 관련이 있지만 타입이 다른 데이터 컬렉션을 나누는 컴포넌트예요.

기본 사용법 (Basic Usage)

기본적이고 간결한 탭이에요. Tabs는 선택형 카드 기능을 제공해요. 기본적으로 첫 번째 탭이 활성 상태로 선택되고, value 속성을 설정해서 어떤 탭이든 활성화할 수 있어요.

카드 스타일 (Card Style)

카드 모양으로 스타일링된 탭이에요. type을 card로 설정하면 카드 스타일 탭을 얻을 수 있어요.

테두리 카드 (Border Card)

테두리 카드 탭이에요. type을 border-card로 설정하세요.

탭 위치 (Tab Position)

tab-position 속성으로 탭의 위치를 설정할 수 있어요. 네 가지 방향 중에서 선택할 수 있어요: tabPosition="left|right|top|bottom"

커스텀 탭 (Custom Tab)

named slot을 사용해서 탭 라벨 콘텐츠를 커스터마이즈할 수 있어요.

탭 추가 & 닫기 (Add & Close Tab)

카드 타입 Tabs만 addable & closable을 지원해요.

커스텀 추가 버튼 아이콘 (Customized Add Button Icon)

새 탭의 커스텀 트리거 버튼 (Customized Trigger Button of New Tab)

      {{ item.content }}

import { ref } from 'vue'

import type { TabPaneName } from 'element-plus'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: 'New Tab',
    name: newTabName,
    content: 'New Tab content',
  })
  editableTabsValue.value = newTabName
}
const removeTab = (targetName: TabPaneName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

기본값 (Default Value)

Tabs API

Tabs 속성 (Attributes)

Tabs 이벤트 (Events)

Tabs 슬롯 (Slots)

Tabs Exposes

Tab-nav API

Tab-nav Exposes

Tab-bar API

Tab-bar Exposes

Tab-pane API

Tab-pane 속성 (Attributes)

Tab-pane 슬롯 (Slots)

FAQ

정렬 가능/드래그 가능한 탭을 어떻게 사용하나요?

직접 구현하는 데 필요한 정보를 제공하고 있어요. 네이티브 방식(demo)을 사용하거나, SortableJs(demo)를 사용하면 돼요.

더 알아보기 (Learn more)