KRDS Vue

탭바 Tab bar ​

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

KRDS 가이드

기본 ​

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

새 창에서 보기
vue
<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { KrdsTabBar } from '@krds.ui/vue'

  const current = ref('home')
  // 라우터를 쓴다면 selected는 현재 경로로 정하고, 링크 이동은 router-link나 router.push로 처리한다
  const go = (key: string) => (event: MouseEvent) => {
    event.preventDefault()
    current.value = key
  }

  const items = computed(() => [
    { text: '홈', icon: 'ico-bread-home', href: '#home', selected: current.value === 'home', onClick: go('home') },
    { text: '내정보', icon: 'ico-my', href: '#my', selected: current.value === 'my', onClick: go('my') },
    { text: '즐겨찾기', icon: 'ico-scrap', href: '#bookmark', selected: current.value === 'bookmark', onClick: go('bookmark') },
    { text: '전체', icon: 'ico-all', selected: current.value === 'all', onClick: () => (current.value = 'all') }
  ])
</script>

<template>
  <KrdsTabBar :items="items" />
</template>

사용 지침 ​

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

접근성 ​

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

KrdsTabBar ​

Props

이름타입기본값설명
labelstring'하단 메뉴'내비게이션 이름 (화면낭독기용)
items (필수)KrdsTabBarItem[]-메뉴 항목 (5개 이하, 홈은 맨 왼쪽·전체 메뉴는 맨 오른쪽)