KRDS Angular

탭바 Tab bar ​

탭바는 화면 하단에 고정하여 제공하는 탐색 수단으로 작은 디바이스나 좁은 화면에서 서비스의 핵심 화면으로 빠르게 접근할 수 있도록 도와준다.

KRDS 가이드

기본 ​

기본 <nav>에 krdsTabBar를 붙이고, items에 메뉴 이름(text)과 아이콘(icon)을 넣습니다. href가 있으면 링크, 없으면 버튼(전체 메뉴 열기 등)으로 렌더링하고, 현재 화면에는 selected를 줘서 위쪽 인디케이터와 배경으로 표시합니다. 항목을 누르면 (itemClick)으로 항목과 클릭 이벤트를 보내며, 링크 항목은 event.preventDefault()를 호출해 라우터 이동에 쓸 수 있습니다. 화면 하단에 고정되므로 예제를 별도 화면(iframe)에 띄웁니다.

새 창에서 보기
ts
import { Component, computed, signal } from '@angular/core'
import { KrdsTabBar, type KrdsTabBarClick } from '@krds.ui/angular'

@Component({
  selector: 'demo-tab-bar-basic',
  imports: [KrdsTabBar],
  template: ` <nav krdsTabBar [items]="items()" (itemClick)="go($event)"></nav> `
})
export default class TabBarBasic {
  readonly menu = [
    { text: '홈', icon: 'ico-bread-home', href: '#home' },
    { text: '내정보', icon: 'ico-my', href: '#my' },
    { text: '즐겨찾기', icon: 'ico-scrap', href: '#bookmark' },
    { text: '전체', icon: 'ico-all' }
  ]
  readonly current = signal('홈')
  readonly items = computed(() => this.menu.map(item => ({ ...item, selected: item.text === this.current() })))

  // 라우터를 쓴다면 selected는 현재 경로로 정하고, 링크 이동은 router.navigateByUrl()로 처리한다
  go({ item, event }: KrdsTabBarClick) {
    event.preventDefault()
    this.current.set(item.text)
  }
}

사용 지침 ​

  • 메인 메뉴가 보이는 넓은 화면(1024px 이상)에서는 탭바가 숨겨집니다. 좁은 화면용 내비게이션으로만 씁니다.
  • 탭바가 있는 동안 페이지 아래에 탭바 높이만큼 여백이 생겨 푸터 등 마지막 내용이 가려지지 않고, 플로팅 버튼은 탭바 위로 올라갑니다.
  • 메뉴는 5개 이하로 두고, 홈은 맨 왼쪽, 전체 메뉴는 맨 오른쪽에 둡니다.
  • 아이콘과 레이블을 함께 쓰고, 레이블은 잘리지 않도록 1~2단어로 짧게 씁니다.
  • 스크롤할 때 숨기거나 위치를 바꾸지 않습니다. 하위 화면에서는 탭바를 빼도 됩니다.

접근성 ​

  • <nav>에 label(기본 하단 메뉴)로 이름을 붙여 화면낭독기가 내비게이션 영역으로 인식합니다.
  • 선택된 메뉴에는 aria-current="page"가 붙어 현재 화면임을 전달합니다.

KrdsTabBar ​

선택자 nav[krdsTabBar]

Inputs

이름타입기본값설명
items (필수)KrdsTabBarItem[]-항목
labelstring'하단 메뉴'내비게이션 이름

Outputs

이름값설명
itemClickKrdsTabBarClick항목을 눌렀을 때

타입

ts
/** 탭바 항목 */
export interface KrdsTabBarItem {
  text: string
  /** 아이콘 클래스 (예: 'ico-bread-home') */
  icon: string
  /** 링크 주소 (없으면 버튼) */
  href?: string
  /** 현재 페이지 (aria-current) */
  selected?: boolean
}

/** 탭바 항목 클릭 이벤트 */
export interface KrdsTabBarClick {
  item: KrdsTabBarItem
  event: MouseEvent
}