머티리얼 디자인 라이트-탭
Material Design Lite (MDL) 탭 구성 요소는 단일 공간에 여러 화면을 독점적으로 표시하는 데 도움이되는 사용자 인터페이스 구성 요소입니다.
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 탭에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-layout 컨테이너를 MDL 구성 요소로 식별합니다. 외부 컨테이너 요소에 필요합니다. |
| 2 | mdl-tabs 탭 컨테이너를 MDL 구성 요소로 식별합니다. "외부"div 요소에 필요합니다. |
| 삼 | mdl-js-tabs 기본 MDL 동작을 탭 컨테이너에 설정합니다. "외부"div 요소에 필요합니다. |
| 4 | mdl-js-ripple-effect 탭 링크에 잔물결 클릭 효과를 추가합니다. 선택 과목; "외부"div 요소로 이동합니다. |
| 5 | mdl-tabs__tab-bar 컨테이너를 MDL 탭 링크 모음으로 식별합니다. 첫 번째 "내부"div 요소에 필요합니다. |
| 6 | mdl-tabs__tab 앵커 (링크)를 MDL 탭 활성화기로 식별합니다. 첫 번째 "내부"div 요소의 모든 링크에 필요합니다. |
| 7 | is-active 탭을 기본 표시 탭으로 식별합니다. "내부"div (탭) 요소 중 하나 (하나만)에 필요합니다. |
| 8 | mdl-tabs__panel 컨테이너를 탭 콘텐츠로 식별합니다. 각 "내부"div (탭) 요소에 필요합니다. |
예
다음 예제는 mdl-tab 클래스를 사용하여 다양한 탭의 내용을 레이아웃하는 방법을 이해하는 데 도움이됩니다.
아래에 주어진 MDL 클래스가이 예제에서 사용됩니다.
mdl-layout − div를 MDL 구성 요소로 식별합니다.
mdl-js-layout − 외부 div에 기본 MDL 동작을 추가합니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.
mdl-layout__header-row − 컨테이너를 MDL 헤더 행으로 식별합니다.
mdl-layout-title − 레이아웃 제목 텍스트를 식별합니다.
mdl-layout__content − div를 MDL 레이아웃 콘텐츠로 식별합니다.
mdl-tabs − 탭 컨테이너를 MDL 구성 요소로 식별합니다.
mdl-js-tabs − 기본 MDL 동작을 탭 컨테이너에 설정합니다.
mdl-tabs__tab-bar − 컨테이너를 MDL 탭 링크 모음으로 식별합니다.
mdl-tabs__tab − 앵커 (링크)를 MDL 탭 활성화기로 식별합니다.
is-active − 기본 표시 탭으로 탭을 식별합니다.
mdl-tabs__panel − 컨테이너를 탭 콘텐츠로 식별합니다.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.