@angular/aria/tabs

Tabs

디렉티브

Tabs 컨테이너입니다.

API

    
      class Tabs implements OnDestroy {}

element

HTMLElement

호스트 엘리먼트에 대한 참조입니다.

ngOnDestroy

void

@returnsvoid

설명

Tabs 컨테이너입니다.

ngTabs 디렉티브는 여러 겹으로 구성된 컨텐츠 섹션 모음을 나타냅니다. 탭 인터페이스 전체를 담는 컨테이너로 동작하며 ngTabList, ngTab, ngTabPanel 디렉티브의 동작을 조정합니다.

<div ngTabs>
  <ul ngTabList [(selectedTab)]="selectedTabValue">
    <li ngTab value="tab1">Tab 1</li>
    <li ngTab value="tab2">Tab 2</li>
    <li ngTab value="tab3">Tab 3</li>
  </ul>

  <div ngTabPanel value="tab1">
     <ng-template ngTabContent>Content for Tab 1</ng-template>
  </div>
  <div ngTabPanel value="tab2">
     <ng-template ngTabContent>Content for Tab 2</ng-template>
  </div>
  <div ngTabPanel value="tab3">
     <ng-template ngTabContent>Content for Tab 3</ng-template>
  </div>
</div>