KRDS Angular

탭 Tab ​

탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다. 탭 버튼 목록과 콘텐츠 패널이 수직으로 쌓여 있는 형태로 표현되며, 사용자는 탭을 선택하여 해당 콘텐츠 섹션을 표시할 수 있다.

KRDS 가이드

기본 ​

tabs로 탭 목록을 주고, 각 패널 내용은 탭 id와 같은 값을 준 <ng-template krdsTabPanel="탭 id">에 넣습니다. 처음에는 비활성화되지 않은 첫 번째 탭이 선택되고, 선택된 탭에는 화면낭독기용 "선택됨" 텍스트(selectedText)가 붙습니다. 좌우 방향키(←·→)로 탭 버튼 사이에서 초점을 옮길 수 있습니다. 방향키는 비활성 탭을 건너뛰고 끝에서 처음으로 돌아가며, Home·End는 첫·마지막 탭으로 갑니다.

ts
import { Component } from '@angular/core'
import { KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-tabs-basic',
  imports: [KrdsTabs, KrdsTabPanel],
  template: `
    <krds-tabs [tabs]="tabs">
      <ng-template krdsTabPanel="tab1">탭 1 영역</ng-template>
      <ng-template krdsTabPanel="tab2">탭 2 영역</ng-template>
      <ng-template krdsTabPanel="tab3">탭 3 영역</ng-template>
    </krds-tabs>
  `
})
export default class TabsBasic {
  readonly tabs: KrdsTabItem[] = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
}

버튼형 ​

variant="fill"은 버튼 모양의 탭입니다.

ts
import { Component } from '@angular/core'
import { KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-tabs-fill',
  imports: [KrdsTabs, KrdsTabPanel],
  template: `
    <krds-tabs [tabs]="tabs" variant="fill">
      <ng-template krdsTabPanel="tab1">탭 1 영역</ng-template>
      <ng-template krdsTabPanel="tab2">탭 2 영역</ng-template>
      <ng-template krdsTabPanel="tab3">탭 3 영역</ng-template>
    </krds-tabs>
  `
})
export default class TabsFill {
  readonly tabs: KrdsTabItem[] = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
}

풀사이즈 ​

full을 주면 탭이 전체 폭을 나눠 가집니다.

ts
import { Component } from '@angular/core'
import { KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-tabs-full',
  imports: [KrdsTabs, KrdsTabPanel],
  template: `
    <div style="display: flex; flex-direction: column; gap: 4rem">
      <krds-tabs [tabs]="tabs" full>
        <ng-template krdsTabPanel="tab1">라인형 풀사이즈 탭 1 영역</ng-template>
        <ng-template krdsTabPanel="tab2">라인형 풀사이즈 탭 2 영역</ng-template>
      </krds-tabs>
      <krds-tabs [tabs]="tabs" variant="fill" full>
        <ng-template krdsTabPanel="tab1">버튼형 풀사이즈 탭 1 영역</ng-template>
        <ng-template krdsTabPanel="tab2">버튼형 풀사이즈 탭 2 영역</ng-template>
      </krds-tabs>
    </div>
  `
})
export default class TabsFull {
  readonly tabs: KrdsTabItem[] = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' }
  ]
}

비활성화 ​

항목에 disabled: true를 주면 해당 탭을 선택할 수 없습니다.

ts
import { Component } from '@angular/core'
import { KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-tabs-disabled',
  imports: [KrdsTabs, KrdsTabPanel],
  template: `
    <krds-tabs [tabs]="tabs">
      <ng-template krdsTabPanel="tab1">탭 1 영역</ng-template>
      <ng-template krdsTabPanel="tab2">탭 2 영역</ng-template>
      <ng-template krdsTabPanel="tab3">탭 3 영역</ng-template>
    </krds-tabs>
  `
})
export default class TabsDisabled {
  readonly tabs: KrdsTabItem[] = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2', disabled: true },
    { id: 'tab3', label: '타이틀 3' }
  ]
}

외부 제어 ​

[(selected)]로 선택된 탭의 id를 주고받습니다. 탭이 바뀔 때만 알고 싶으면 (selectedChange)를 씁니다.

ts
import { Component, signal } from '@angular/core'
import { KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-tabs-controlled',
  imports: [KrdsTabs, KrdsTabPanel],
  template: `
    <div style="display: flex; flex-direction: column; gap: 2rem">
      <p>현재 탭: {{ selected() }}</p>
      <krds-tabs [tabs]="tabs" [(selected)]="selected">
        <ng-template krdsTabPanel="tab1">탭 1 영역</ng-template>
        <ng-template krdsTabPanel="tab2">탭 2 영역</ng-template>
        <ng-template krdsTabPanel="tab3">탭 3 영역</ng-template>
      </krds-tabs>
    </div>
  `
})
export default class TabsControlled {
  readonly tabs: KrdsTabItem[] = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
  readonly selected = signal('tab2')
}

KrdsTabs ​

선택자 krds-tabs

Inputs

이름타입기본값설명
tabs (필수)KrdsTabItem[]-탭 목록
[(selected)]string-선택한 탭 id
variant'line' | 'fill''line'스타일
fullbooleanfalse탭을 전체 폭으로 나눔
selectedTextstring'선택됨'선택한 탭을 화면낭독기에 알리는 문구

타입

ts
/** 탭 */
export interface KrdsTabItem {
  /** 탭 id (패널의 krdsTabPanel과 같게) */
  id: string
  /** 탭 이름 */
  label: string
  /** 비활성화 */
  disabled?: boolean
}

KrdsTabPanel ​

선택자 ng-template[krdsTabPanel]

Inputs

이름타입기본값설명
krdsTabPanel (필수)string-패널이 속한 탭 id