탭

탭 (Tabs)

Bulma tabs는 다양한 버전으로 제공되는 간단한 내비게이션 컴포넌트입니다. 다음 구조만 필요해요:

• tabs 컨테이너
• <ul> HTML 요소
• <li> HTML 요소 목록
• 각 링크용 <a> HTML 앵커 요소

기본 탭 스타일은 하단에 하나의 테두리를 가집니다.

출처: 문서

본문

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

정렬 (Alignment)

탭 목록을 정렬하려면 .tabs 컨테이너에 is-centered 또는 is-right 수식어를 사용합니다:

<div class="tabs is-centered">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

아이콘 (Icons)

Font Awesome 아이콘을 자유롭게 사용할 수 있어요.

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

크기 (Sizes)

is-small, is-medium, is-large 중 3가지 추가 크기를 선택할 수 있어요.

<div class="tabs is-large">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

스타일 (Styles)

더 고전적인 테두리 스타일을 원한다면 is-boxed 수식어를 붙이세요.

<div class="tabs is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

라디오 버튼처럼 하나를 클릭하면 다른 모든 것이 해제되는 상호 배타적 탭을 원한다면 is-toggle 수식어를 사용하세요.

<div class="tabs is-toggle">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <!-- ... -->
  </ul>
</div>

is-toggle과 is-toggle-rounded를 함께 사용하면 첫 번째와 마지막 항목이 둥글게 됩니다:

<div class="tabs is-toggle is-toggle-rounded">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <!-- ... -->
  </ul>
</div>

탭이 사용 가능한 전체 너비를 차지하게 하려면 is-fullwidth를 사용하세요.

<div class="tabs is-fullwidth">
  <ul>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-angle-left" aria-hidden="true"></i
        ></span>
        <span>Left</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-angle-up" aria-hidden="true"></i
        ></span>
        <span>Up</span>
      </a>
    </li>
    <li>
      <a>
        <span>Right</span>
        <span class="icon"
          ><i class="fas fa-angle-right" aria-hidden="true"></i
        ></span>
      </a>
    </li>
  </ul>
</div>

조합하기 (Combining)

다른 수식어들을 조합할 수 있어요. 예를 들어 가운데 정렬된 박스형 탭이나 전체 너비 토글 탭을 만들 수 있습니다.

<div class="tabs is-centered is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <!-- ... -->
  </ul>
</div>

<div class="tabs is-toggle is-fullwidth is-large">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <!-- ... -->
  </ul>
</div>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Breadcrumb 컴포넌트
• Menu 컴포넌트