탭

탭은 VmTabs 캄포넌트 안에 여러개의 VmTab 컴포넌트를 작성한다.

`VmTabs`

여러개의 VmTab을 가지는 탭의 부모 컴포넌트

Props
- defaultTab ? - string 기본으로 선택될 탭의 아이디
- tabsClass ? - string 탭 전체를 감싸는 부모 div에 적용할 클래스. 기본값은 vm-tabs-header
- tabClass ? - string 탭을 선택할 헤더버튼에 적용할 클래스. 기본값은 vm-tabs-header-tab
- d ? - boolean 디버그 정보 표시
- tabChanging ? - (to: Tab, from: Tab) => boolean 탭 전환시 실행할 함수. return false하면 탭 전환이 되지 않음.
Emits
- changed 탭 전환후에 실행할 함수
  - @parameter Tab

(e: 'changed', tab: Tab): void

interface Tab {
  tabId: string
  title: string
  index: number
  isActive?: import('vue').ComputedRef<boolean>
  isDisabled?: import('vue').ComputedRef<boolean>
}

slot
- default VmTab컴포넌트
- header 탭 헤더 버튼 영역에서 맨 우측에 위치할 기능 버튼 등

Example

<VmTabs class="h-1/3" default-tab="defaultTab" :tab-changing="tabChanging" @changed="tabChanged" d>
  <template #header>
    <VmButton @click="tabHeaderButton(1)">탭 버튼1</VmButton>
    <VmButton @click="tabHeaderButton(2)">탭 버튼2</VmButton>
  </template>
  <VmTab tab-id="firstTab" title="첫번째 탭">
    <h2>첫번째 탭</h2>
  </VmTab>
  <VmTab tab-id="defaultTab" title="기본탭">
    <h2>두번째 탭 - 기본탭(default-tab)</h2>
  </VmTab>
  <VmTab tab-id="disabledTab" title="Disabled tab" :is-disabled="disabledTab === '1'">
    <h2>세번째 탭 내용. 비활성(is-disabled) </h2>
  </VmTab>
</VmTabs>

/**
  * 탭 변경하기전에 실행할 함수.
  * return false하면 변경하지 않음.
  */
function tabChanging(to: Tab, from: Tab) {
  if (cancelChangingTab.value === '1') {
    return false
  }
  return true
}

/**
  * 탭 변경후에 실행되는 이벤트
  */
function tabChanged() {
}

Style

global css 여러 프로그램에서 반복되는 스타일은 _vm-tab.scss 파일에 스타일 정의하고 사용
- ex) 탭 헤더가 파란색 밑줄 스타일

  <VmTabs class="underline h-1/3">
  </VmTabs>

  // src\styles\components\_vm-tab.scss
  .vm-tabs.underline {
    .vm-tabs-header {
      position: relative;
      border-bottom: 1px solid #e0e0e0;
      .vm-tabs-header-tab {
        border: none;
        border-radius: 0px;
        position: relative;

        &::after{
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background-color: #0BA5EC;
          position: absolute;
          left: 0;
          bottom: 0;
          display: none;
        }
        &.active::after {
          display: block;
        }
      }
    }
    .vm-tab {
      margin-top: px(15);
      padding: px(10) px(10);
      width: 100%;
      overflow-x: hidden;
    }
  }

scoped css
- 해당 프로그램에서만 사용되면 <style scoped lang="scss"> 사용
- scoped로 작성한 경우, 적용된 css는 .a[data-v-f3f3eg9]와 같이 data- 속성이 함께 적용되는데 global에 정의된 css와 충돌해서 적용되지 않으면 deep selector를 사용한다.
- Deep Selectors https://vuejs.org/api/sfc-css-features.html#deep-selectors
```
  .a :deep(.b) {
    /* ... */
  }
```
The above will be compiled into:
```
  .a[data-v-f3f3eg9] .b {
    /* ... */
  }
```

  <style scoped lang="scss">
  @import '@/styles/functions';
  // 샘플에 탭이 여러개라 .scoped를 붙임. 한개면 생략
  .vm-tabs.scoped {
    :deep(.vm-tabs-header) {
      /* ... */
    }

    :deep(.vm-tabs-header-tab) {
      /* ... */
    }

    :deep(.vm-tab[tabid="homeTab"]) {
      /* ... */
    }
  }
  </style>

`VmTab`

VmTabs 컴포넌트의 자식으로 탭안의 내용을 작성한다.

Props
- tabId - string 각 탭을 구분하기 위한 유니크한 아이디
- title - string 탭 헤더 버튼에 표시할 제목
- isDisabled ? - boolean 특정 조건에 따라 탭을 비활성화 한다.
Emits 없음
slot 탭의 내용물

탭 #

VmTabs #

Example #

VmTab #

탭

`VmTabs`

Example

`VmTab`