본문으로 건너뛰기

HorizontalTab

HorizontalTab은 사용자가 여러 탭 메뉴 간에 전환할 수 있는 수평 탭 네비게이션 컴포넌트입니다. 다양한 스타일과 크기를 지원하며, 슬라이더 기능을 통해 많은 탭이 있을 때도 효과적으로 탐색할 수 있습니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 HorizontalTab 컴포넌트의 모습을 확인해보세요.

activeTabstring
활성 탭 ID를 입력합니다.
typeselect
탭 타입을 선택합니다.
fullWidthboolean
전체 너비 사용 여부를 선택합니다.
menusarray
탭 메뉴를 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.

기본 사용법​

import { HorizontalTab } from '@ncds/ui-admin';

function App() {
  const [activeTab, setActiveTab] = useState('tab1');

  const menus = [
    { id: 'tab1', label: '탭 1' },
    { id: 'tab2', label: '탭 2' },
    { id: 'tab3', label: '탭 3' },
  ];

  return <HorizontalTab menus={menus} activeTab={activeTab} onClick={(id) => setActiveTab(id)} />;
}

Props​

PropTypeDefaultDescription
type'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical''button-primary'탭 버튼의 스타일 유형을 지정합니다.
size'xs' | 'sm' | 'md''md'탭 버튼의 크기를 지정합니다.
activeTabstring-현재 활성화된 탭의 ID를 지정합니다.
fullWidthbooleanfalsetrue로 설정하면 컴포넌트가 부모 요소의 전체 너비를 차지합니다.
menusArray<TabButtonProps>[]

탭 메뉴 배열을 지정합니다. 각 메뉴는 id, label, href, target, badgeInfo 등의 속성을 가질 수 있습니다.

onClick(id: string) => void-탭을 클릭했을 때 호출되는 콜백 함수입니다. 선택된 탭의 ID가 매개변수로 전달됩니다.

TabButtonProps 타입​

PropTypeDefaultDescription
idstring-탭의 고유 식별자입니다.
labelstring-탭에 표시되는 텍스트 레이블입니다.
hrefstring-탭이 링크로 작동하도록 할 때 사용되는 URL입니다.
target'_self' | '_blank''_self'링크가 열리는 방식을 지정합니다.
badgeInfoBadgeProps-탭에 뱃지를 추가할 때 사용되는 속성입니다.
isActivebooleanfalse탭의 활성화 상태를 지정합니다. 일반적으로 이 속성은 내부적으로 관리됩니다.

상세 예제 (Detailed Examples)​

다양한 스타일 유형​

HorizontalTab은 다양한 스타일 유형을 지원합니다.

button-primary (기본)
button-white
underline
underline-fill
line-vertical
button-primary (기본)
button-white
underline
underline-fill
line-vertical

다양한 크기​

HorizontalTab은 세 가지 크기 옵션을 제공합니다.

xs 크기
sm 크기
md 크기 (기본)
xs 크기
sm 크기
md 크기 (기본)

뱃지 사용하기​

탭에 뱃지를 추가하여 추가 정보를 표시할 수 있습니다.

링크로 사용하기​

탭을 링크로 사용하여 다른 페이지로 이동할 수 있습니다.

홈
외부 링크

전체 너비 사용하기​

fullWidth 속성을 사용하여 탭이 부모 요소의 전체 너비를 차지하도록 할 수 있습니다.

많은 탭 메뉴 사용하기​

많은 탭 메뉴가 있을 경우 자동으로 슬라이더 형태로 표시됩니다.

HTML 버전​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.0/main.min.css" />
<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.0/main.min.js" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="swiper ncua-horizontal-tab ncua-horizontal-tab--button-primary">
  <div class="swiper-wrapper">
    <div class="swiper-slide ncua-horizontal-tab__item">
      <button
        type="button"
        class="ncua-tab-button ncua-tab-button--md ncua-tab-button--button-primary is-active"
        id="tab1"
      >
        탭 1
        <span class="ncua-badge ncua-badge--pill-outline ncua-badge--neutral ncua-badge--xs">
          <span class="ncua-badge__label">New</span>
        </span>
      </button>
    </div>
    <div class="swiper-slide ncua-horizontal-tab__item">
      <button type="button" class="ncua-tab-button ncua-tab-button--md ncua-tab-button--button-primary" id="tab2">
        탭 2
      </button>
    </div>
    <div class="swiper-slide ncua-horizontal-tab__item">
      <button type="button" class="ncua-tab-button ncua-tab-button--md ncua-tab-button--button-primary" id="tab3">
        탭 3
      </button>
    </div>
  </div>
</div>

<script>
  const tabElement = document.querySelector('.ncua-horizontal-tab');
  if (tabElement) {
    new ncua.Tab(tabElement);
  }
</script>

위 HTML 버전은 Swiper.js 라이브러리를 사용하여 많은 탭이 있을 때 슬라이드 기능을 제공합니다.
React 컴포넌트와 동일한 기능과 디자인으로 구현되었으며, 클래스 이름 체계와 구조를 유지합니다.
각 타입과 사이즈 등 여러가지 속성은 다른 예제를 통해 확인 후 적용하면 됩니다.