menuMDUI문서
color_lens
머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

탭

호출 방식

  1. 사용자 정의 속성을 통한 호출 (컴포넌트가 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 함)
  2. JavaScript를 통한 호출

관련 읽기

Material Design 가이드라인: 컴포넌트 - 탭

스타일

기본 스타일

아래는 표준 탭입니다. 모바일에서는 너비의 100%를 차지하며 각 탭의 너비는 동일합니다. 태블릿/PC에서는 왼쪽 정렬됩니다.

codeplay_arrow
예시

        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

스크롤 가능

<div class="mdui-tab">에 .mdui-tab-scrollable 클래스를 추가하여 탭을 가로로 스크롤할 수 있게 합니다. 모바일 기기에서 탭이 많을 때 주로 사용됩니다.

codeplay_arrow
예시

        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

가운데 정렬

<div class="mdui-tab"></div> 요소에 .mdui-tab-centered 클래스를 추가하면 태블릿/PC에서 탭을 가운데로 정렬할 수 있습니다.

codeplay_arrow
예시

        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

너비 100%

<div class="mdui-tab"></div> 요소에 .mdui-tab-full-width 클래스를 추가하면 탭이 항상 너비의 100%를 차지하며 각 탭의 너비가 동일해집니다.

codeplay_arrow
예시

        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

아이콘 포함

codeplay_arrow
예시

        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

아이콘 및 텍스트 포함

codeplay_arrow
예시

        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

배경색 포함

<div class="mdui-tab"></div> 요소에 .mdui-color-[color] 클래스를 추가하여 탭에 배경색을 부여할 수 있습니다.

codeplay_arrow
예시

        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

기본 활성화 탭

<a> 요소에 .mdui-tab-active 클래스를 추가하면 해당 탭이 기본으로 활성화됩니다.

codeplay_arrow
예시

        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

비활성화된 탭

<a> 요소에 disabled 속성을 추가하여 해당 탭을 비활성화할 수 있습니다.

codeplay_arrow
예시

        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

호출 방식

사용자 정의 속성을 통한 호출

이 방식을 사용하면 JavaScript 코드를 작성할 필요 없이 <div class="mdui-tab"></div> 요소에 mdui-tab="options" 속성을 추가하여 컴포넌트를 활성화할 수 있습니다.

컴포넌트가 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 합니다.

<div class="mdui-tab" mdui-tab>
...
</div>

JavaScript를 통한 호출

컴포넌트 인스턴스화:

// selector는 .mdui-tab 요소의 CSS 선택자 또는 DOM 요소입니다.
// options는 플러그인 매개변수입니다. 아래 매개변수 목록을 참조하세요.
var inst = new mdui.Tab(selector, options);
실행

매개변수

매개변수 이름유형기본값설명
triggerstringclick탭 전환 트리거 방식.
  • click: 클릭하여 전환
  • hover: 마우스 오버로 전환
loopbooleanfalse순환 전환 활성화 여부. true인 경우 마지막 탭이 활성화된 상태에서 next 메서드를 호출하면 첫 번째 탭으로 돌아가고, 첫 번째 탭이 활성화된 상태에서 prev 메서드를 호출하면 마지막 탭으로 돌아갑니다.

메서드

메서드 이름설명
prev()이전 탭으로 전환
next()다음 탭으로 전환
show(index)지정된 탭을 표시합니다.
  • index: 탭의 인덱스 번호 또는 id
handleUpdate()

부모 요소의 너비가 변경될 때 표시기 위치를 재설정하기 위해 이 메서드를 호출해야 합니다.

탭에 새 옵션이 동적으로 추가될 때도 이 메서드를 호출하여 새 옵션을 적용해야 합니다.

이벤트

이벤트 이름설명대상매개변수
change.mdui.tab탭이 전환될 때 이벤트가 발생합니다.<div class="mdui-tab"></div>
  • event._detail.inst: 인스턴스
  • event._detail.index: 활성화된 탭의 인덱스 번호
  • event._detail.id: 활성화된 탭 내용의 id
show.mdui.tab지정된 탭으로 전환될 때 이벤트가 발생합니다.<a></a>event._detail.inst: 인스턴스

CSS 클래스 목록

클래스 이름설명
.mdui-tab탭 컴포넌트를 정의합니다.
.mdui-tab-scrollable스크롤 가능한 탭 컴포넌트.
.mdui-tab-centered가운데 정렬된 탭 컴포넌트.
.mdui-tab-full-width너비 100% 탭 컴포넌트.
.mdui-tab-active활성화 상태의 탭.
arrow_backPrevious
그리드 목록
arrow_forwardNext
툴바