Podo UI

Podo UI

탭

탭 네비게이션 컴포넌트

기본 사용법

ul.tabs 구조를 사용하면 탭 네비게이션 스타일이 자동으로 적용됩니다. 활성화된 탭에는 클래스를 추가합니다.

HTML
<ul class="tabs">
  <li class="on">
    <a href="#tab1">탭 1</a>
  </li>
  <li>
    <a href="#tab2">탭 2</a>
  </li>
  <li>
    <a href="#tab3">탭 3</a>
  </li>
</ul>
실제 예제:

Fill 스타일

.fill 클래스를 추가하면 각 탭이 동일한 너비로 확장되어 전체 너비를 채웁니다.

HTML
<ul class="tabs fill">
  <li class="on">
    <a href="#tab1">홈</a>
  </li>
  <li>
    <a href="#tab2">프로필</a>
  </li>
  <li>
    <a href="#tab3">설정</a>
  </li>
</ul>
실제 예제:

많은 탭

탭이 많을 경우 자동으로 가로 스크롤이 가능합니다:

실제 예제:

실제 사용 예제

탭과 콘텐츠를 함께 사용한 예제입니다:

개요

Podo UI는 현대적인 디자인 시스템입니다.

SCSS에서 사용하기

component.module.scss
@use 'podo-ui/mixin' as *;

ul.tabs {
  padding: 0;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px inset color(border);

  // Fill 스타일
  &.fill > li {
    flex: 1;
  }

  > li {
    text-align: center;
    padding: 0;

    > a {
      @include p3;
      display: block;
      padding: s(2) s(5);
      color: color(text-sub);

      &:hover {
        color: inherit;
      }

      &:focus-visible:not(:disabled) {
        outline: 4px solid color(primary-outline);
      }
    }

    // 활성 탭
    &.on > a {
      @include p3-semibold;
      color: color(primary) !important;
      border-bottom: 1px inset color(primary);
      margin-bottom: -1px;
    }
  }
}