머티리얼 디자인 라이트-퀵 가이드
Material Design Lite 란 무엇입니까?
Material Design Lite (MDL은 CSS, JavaScript 및 HTML로 만든 UI 구성 요소 라이브러리입니다. MDL UI 구성 요소는 브라우저 이식성, 장치 독립성과 같은 최신 웹 디자인 원칙을 준수하면서 매력적이고 일관 적이며 기능적인 웹 페이지 및 웹 앱을 구성하는 데 도움이됩니다. , 그리고 우아한 저하.
다음은 Material Design Lite의 두드러진 특징입니다.
내장 반응 형 디자인.
최소한의 공간을 차지하는 표준 CSS.
머티리얼 디자인 개념을 따르도록 조정 된 버튼, 확인란 및 텍스트 필드와 같은 공통 사용자 인터페이스 컨트롤의 새 버전을 포함합니다.
카드, 열 레이아웃, 슬라이더, 스피너, 탭, 타이포그래피 등과 같은 강화되고 전문화 된 기능을 포함합니다.
라이브러리 또는 개발 환경의 유무에 관계없이 사용할 수 있습니다.
브라우저 간이며 재사용 가능한 웹 구성 요소를 만드는 데 사용할 수 있습니다.
반응 형 디자인
Material Design Lite에는 반응 형 디자인이 내장되어 있으므로 Material Design Lite를 사용하여 만든 웹 사이트는 장치 크기에 따라 자체적으로 다시 디자인됩니다.
Material Design Lite 클래스는 웹 사이트가 모든 화면 크기에 맞도록 만들어집니다.
Material Design Lite를 사용하여 만든 웹 사이트는 PC, 태블릿 및 모바일 장치와 완벽하게 호환됩니다.
표준 CSS
Material Design Lite는 표준 CSS 만 사용하며 배우기가 매우 쉽습니다.
jQuery와 같은 외부 JavaScript 라이브러리에 대한 종속성이 없습니다.
ExtensibleMaterial Design Lite는 설계 상 매우 최소화되고 평평합니다.
기존 CSS 규칙을 덮어 쓰는 것보다 새 CSS 규칙을 추가하는 것이 훨씬 쉽다는 사실을 고려하여 설계되었습니다.
그림자와 대담한 색상을 지원합니다.
색상과 음영은 다양한 플랫폼과 장치에서 균일하게 유지됩니다.
그리고 무엇보다도 MDL은 완전히 무료입니다.
Material Design Lite를 사용하는 방법에는 두 가지가 있습니다.
Local Installation − material. {primary}-{accent} .min.css 및 material.min.js 파일을 로컬 컴퓨터에 다운로드하여 HTML 코드에 포함 할 수 있습니다.
CDN Based Version − CDN (Content Delivery Network)에서 직접 material. {primary}-{accent} .min.css 및 material.min.js 파일을 HTML 코드에 포함 할 수 있습니다.
로컬 설치
MDL의 설치를 위해 다음 단계를 따르십시오-
이동 https://www.getmdl.io/started/index.html 사용 가능한 최신 버전을 다운로드하십시오.
그런 다음 다운로드 한 material.min.js 웹 사이트의 디렉토리에있는 파일 (예 : / js 및 material.min.css / css에서.
예
이제 다음과 같이 HTML 파일에 css 및 js 파일을 포함 할 수 있습니다.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "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-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>위의 프로그램은 다음 결과를 생성합니다-
CDN 기반 버전
CDN (Content Delivery Network)에서 직접 js 및 css 파일을 HTML 코드에 포함 할 수 있습니다. storage.googleapis.com 최신 버전의 콘텐츠를 제공합니다.
이 자습서에서는 storage.googleapis.com CDN 버전의 라이브러리를 사용하고 있습니다.
예
이제 Google CDN의 material.css 및 material.js를 사용하여 위의 예를 다시 작성해 보겠습니다.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>위의 프로그램은 다음 결과를 생성합니다-
이 장에서는 Material Design Lite의 다양한 레이아웃에 대해 설명합니다. HTML5에는 다음과 같은 컨테이너 요소가 있습니다.
<div> − HTML 콘텐츠에 일반 컨테이너를 제공합니다.
<header> − 헤더 섹션을 나타냅니다.
<footer> − 바닥 글 섹션을 나타냅니다.
<article> − 기사를 나타냅니다.
<section> − 다양한 유형의 섹션에 대한 일반 컨테이너를 제공합니다.
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 컨테이너에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-layout 컨테이너를 MDL 구성 요소로 식별합니다. 외부 컨테이너 요소에 필요합니다. |
| 2 | mdl-js-layout 레이아웃에 기본 MDL 동작을 추가합니다. 외부 컨테이너 요소에 필요합니다. |
| 삼 | mdl-layout__header 컨테이너를 MDL 구성 요소로 식별합니다. 헤더 요소에 필요합니다. |
| 4 | mdl-layout-icon 애플리케이션 아이콘을 추가하는 데 사용됩니다. 둘 다 표시되는 경우 메뉴 아이콘으로 재정의됩니다. 선택적 아이콘 요소. |
| 5 | mdl-layout__header-row 컨테이너를 MDL 헤더 행으로 식별합니다. 헤더 콘텐츠 컨테이너에 필요합니다. |
| 6 | mdl-layout__title 레이아웃 제목 텍스트를 식별합니다. 레이아웃 제목 컨테이너에 필요합니다. |
| 7 | mdl-layout-spacer 머리글 또는 서랍 내부의 요소를 정렬하는 데 사용됩니다. 남은 공간을 채우기 위해 성장합니다. 일반적으로 요소를 오른쪽으로 정렬하는 데 사용됩니다. 레이아웃 제목을 따르는 div에서 선택 사항입니다. |
| 8 | mdl-navigation 컨테이너를 MDL 탐색 그룹으로 식별합니다. nav 요소에 필요합니다. |
| 9 | mdl-navigation__link 앵커를 MDL 탐색 링크로 식별합니다. 헤더 및 / 또는 서랍 앵커 요소에 필요합니다. |
| 10 | mdl-layout__drawer 컨테이너를 MDL 레이아웃 서랍으로 식별합니다. 서랍 컨테이너 요소에 필요합니다. |
| 11 | mdl-layout__content 컨테이너를 MDL 레이아웃 콘텐츠로 식별합니다. 주요 요소에 필요합니다. |
| 12 | mdl-layout__header--scroll 헤더를 콘텐츠와 함께 스크롤합니다. 헤더 요소에서 선택 사항입니다. |
| 13 | mdl-layout--fixed-drawer 서랍을 항상 표시하고 더 큰 화면에서 엽니 다. 서랍 컨테이너 요소가 아닌 외부 컨테이너 요소에서 선택 사항입니다. |
| 14 | mdl-layout--fixed-header 작은 화면에서도 헤더를 항상 표시합니다. 외부 컨테이너 요소에서 선택 사항입니다. |
| 15 | mdl-layout--large-screen-only 작은 화면에서 요소를 숨 깁니다. mdl-layout의 모든 하위 항목에서 선택 사항입니다. |
| 16 | mdl-layout--small-screen-only 큰 화면에서 요소를 숨 깁니다. mdl-layout의 모든 하위 항목에서 선택 사항입니다. |
| 17 | mdl-layout__header--waterfall 여러 헤더 행으로 "폭포"효과를 허용합니다. 헤더 요소에서 선택 사항입니다. |
| 18 | mdl-layout__header--transparent 헤더를 투명하게 만들고 레이아웃 배경 위에 그립니다. 헤더 요소에서 선택 사항입니다. |
| 19 | mdl-layout__header--seamed 그림자가없는 헤더를 사용합니다. 헤더 요소에서 선택 사항입니다. |
| 20 | mdl-layout__tab-bar 컨테이너를 MDL 탭 표시 줄로 식별합니다. 헤더 내부의 컨테이너 요소에 필요합니다 (탭 레이아웃). |
| 21 | mdl-layout__tab 앵커를 MDL 탭 링크로 식별합니다. 탭 표시 줄 앵커 요소에 필요합니다. |
| 22 | is-active 탭을 기본 활성 탭으로 식별합니다. 탭 표시 줄 앵커 요소 및 연관된 탭 섹션 요소에서 선택 사항입니다. |
| 23 | mdl-layout__tab-panel 컨테이너를 탭 컨텐츠 패널로 식별합니다. 탭 섹션 요소에 필요합니다. |
| 24 | mdl-layout--fixed-tabs 기본 스크롤 가능 탭 대신 고정 탭을 사용합니다. 헤더 내부 컨테이너가 아닌 외부 컨테이너 요소에 대한 선택 사항입니다. |
다음 예제는 mdl-layout 클래스를 사용하여 다양한 컨테이너의 스타일을 지정하는 방법을 보여줍니다.
고정 서랍
고정 드로어가 있지만 헤더가없는 템플릿을 만들려면 다음 MDL 클래스가 사용됩니다.
mdl-layout − div를 MDL 구성 요소로 식별합니다.
mdl-js-layout − 외부 div에 기본 MDL 동작을 추가합니다.
mdl-layout--fixed-drawer − 서랍이 항상 표시되고 더 큰 화면에서 열립니다.
mdl-layout__drawer − div를 MDL 레이아웃 서랍으로 식별합니다.
mdl-layout-title − 레이아웃 제목 텍스트를 식별합니다.
mdl-navigation − div를 MDL 탐색 그룹으로 식별합니다.
mdl-navigation__link − 앵커를 MDL 탐색 링크로 식별합니다.
mdl-layout__content − div를 MDL 레이아웃 콘텐츠로 식별합니다.
mdl_fixeddrawer.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>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
고정 헤더
추가 MDL 클래스를 따르는 고정 헤더로 템플릿을 생성하기 위해 사용됩니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.
mdl_fixedheader.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>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
고정 헤더 및 서랍
고정 헤더와 고정 서랍이있는 템플릿을 생성하려면 다음과 같은 추가 MDL 클래스가 사용됩니다.
mdl-layout--fixed-drawer − 서랍이 항상 표시되고 더 큰 화면에서 열립니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.
mdl_fixedheader.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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
스크롤링 헤더
스크롤 헤더가있는 템플릿을 생성하기 위해 다음과 같은 MDL 클래스가 사용됩니다.
mdl-layout--header--scroll − 헤더를 내용과 함께 스크롤합니다.
mdl_scrollingheader.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>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
계약 헤더
페이지가 아래로 스크롤 될 때 축소되는 헤더가있는 템플릿을 생성하기 위해 다음 MDL 클래스가 사용됩니다.
mdl-layout__header--waterfall − 여러 헤더 행으로 "폭포"효과를 허용합니다.
mdl_waterfallheader.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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
스크롤 가능한 탭이있는 고정 헤더
스크롤 가능한 탭이있는 헤더가있는 템플릿을 만들려면 다음 MDL 클래스가 사용됩니다.
mdl-layout__tab-bar − 컨테이너를 MDL 탭 바로 식별합니다.
mdl-layout__tab − 앵커를 MDL 탭 링크로 식별합니다.
mdl-layout__tab-panel − 컨테이너를 탭 콘텐츠 패널로 식별합니다.
mdl_scrollabletabheader.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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
고정 탭이있는 고정 헤더
고정 탭이있는 헤더가있는 템플릿을 생성하기 위해 다음과 같은 추가 MDL 클래스가 사용됩니다.
mdl-layout--fixed-tabs − 기본 스크롤 탭 대신 고정 탭을 사용합니다.
mdl_fixedtabheader.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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
MDL (Material Design Lite) 그리드는 다양한 화면 크기에 맞게 콘텐츠를 레이아웃하기위한 구성 요소입니다. MDL 그리드는 컨테이너 / div 요소로 정의되고 포함됩니다. 그리드에는 데스크톱 크기 화면에 12 개 열, 태블릿 크기 화면에 8 개 열, 전화기 크기 화면에 4 개 열이 있으며 각 크기에는 미리 정의 된 여백과 거터가 있습니다. 셀은 다음과 같은 예외를 제외하고 정의 된 순서대로 행에 순차적으로 배치됩니다.
그리드 셀이 화면 크기 중 하나의 행에 맞지 않으면 다음 행으로 흐릅니다.
그리드 셀에 지정된 열 크기가 화면 크기에 대한 열 수보다 크거나 같으면 전체 행을 차지합니다.
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 그리드에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-layout 컨테이너를 MDL 구성 요소로 식별합니다. 외부 컨테이너 요소에 필요합니다. |
| 2 | mdl-grid 컨테이너를 MDL 그리드 구성 요소로 식별합니다. "외부"div 요소에 필요합니다. |
| 삼 | mdl-cell 컨테이너를 MDL 셀로 식별합니다. "내부"div 요소에 필요합니다. |
| 4 | mdl-grid--no-spacing 그리드 셀 사이에 여백이 없도록 업데이트합니다. 그리드 컨테이너의 경우 선택 사항입니다. |
| 5 | mdl-cell--N-col 이렇게하면 셀의 열 크기를 N, N은 1-12 포함, 기본값은 4로 설정하는 데 도움이됩니다. "내부"div 요소의 경우 선택 사항입니다. |
| 6 | mdl-cell--N-col-desktop 이렇게하면 데스크톱 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-12입니다. "내부"div 요소의 경우 선택 사항입니다. |
| 7 | mdl-cell--N-col-tablet 이렇게하면 태블릿 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-8입니다. "내부"div 요소의 경우 선택 사항입니다. |
| 8 | mdl-cell--N-col-phone 이것은 전화 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-4 포함입니다. "내부"div 요소의 경우 선택 사항입니다. |
| 9 | mdl-cell--hide-desktop 데스크탑 모드에서 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다. |
| 10 | mdl-cell--hide-tablet 태블릿 모드에서는 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다. |
| 11 | mdl-cell--hide-phone 전화 모드 일 때 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다. |
| 12 | mdl-cell--stretch 셀을 세로로 늘여 부모를 채 웁니다 (기본값). "내부"div 요소의 경우 선택 사항입니다. |
| 13 | mdl-cell--top 부모의 맨 위에 셀을 정렬합니다. "내부"div 요소의 경우 선택 사항입니다. |
| 14 | mdl-cell--middle 셀을 부모의 가운데에 맞 춥니 다. "내부"div 요소의 경우 선택 사항입니다. |
| 15 | mdl-cell--bottom 셀을 부모의 맨 아래에 맞 춥니 다. "내부"div 요소의 경우 선택 사항입니다. |
예
다음 예제는 mdl-grid 클래스를 사용하여 다양한 화면에 내용을 레이아웃하는 방법을 이해하는 데 도움이됩니다.
이 예제에서는 아래에 제공된 MDL 클래스가 사용됩니다.
mdl-layout − div를 MDL 구성 요소로 식별합니다.
mdl-js-layout − 외부 div에 기본 MDL 동작을 추가합니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.
mdl-layout__header-row − 컨테이너를 MDL 헤더 행으로 식별합니다.
mdl-layout__drawer − div를 MDL 레이아웃 서랍으로 식별합니다.
mdl-layout-title − 레이아웃 제목 텍스트를 식별합니다.
mdl-navigation − div를 MDL 탐색 그룹으로 식별합니다.
mdl-navigation__link − 앵커를 MDL 탐색 링크로 식별합니다.
mdl-layout__content − div를 MDL 레이아웃 콘텐츠로 식별합니다.
mdl-grid − div를 MDL 그리드 구성 요소로 식별합니다.
mdl-cell − div를 MDL 셀로 식별합니다.
mdl-cell--1-col − 데스크톱 화면 크기에서 셀의 열 크기를 12 셀 중 1 셀로 설정합니다.
mdl-cell--2-col − 바탕 화면 크기의 12 셀 중 2 셀 크기로 셀의 열 크기를 설정합니다.
mdl-cell--4-col − 데스크톱 화면 크기의 12 셀 중 4 셀 크기로 셀의 열 크기를 설정합니다.
mdl-cell--6-col − 데스크톱 화면 크기에서 셀의 열 크기를 12 셀 중 6 셀로 설정합니다.
mdl-cell--4-col-phone − 휴대폰 화면 크기에서 셀의 열 크기를 4 셀 중 4 셀로 설정합니다.
mdl-cell--6-col-tablet − 태블릿 화면 크기에서 셀의 열 크기를 8 셀 중 6 셀로 설정합니다.
mdl-cell--8-col-tablet − 태블릿 화면 크기에서 셀의 열 크기를 8 셀 중 8 셀로 설정합니다.
mdl_grid.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">
<style>
.graybox {
background-color:#ddd;
}
</style>
</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 Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
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>결과
결과를 확인하십시오.
MDL 바닥 글 구성 요소는 두 가지 기본 형식으로 제공됩니다. mega-footer 과 mini-footer. 메가 바닥 글에는 미니 바닥 글보다 더 복잡한 콘텐츠가 포함됩니다. 메가 바닥 글은 수평 규칙으로 구분 된 여러 콘텐츠 섹션을 나타낼 수있는 반면 미니 바닥 글은 단일 콘텐츠 섹션을 나타냅니다. 바닥 글에는 일반적으로 정보 및 링크와 같은 클릭 가능한 콘텐츠가 모두 포함됩니다.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 메가 푸터 및 미니 푸터에 적용하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-mega-footer 컨테이너를 MDL 메가 푸터 구성 요소로 식별합니다. 바닥 글 요소에 필요합니다. |
| 2 | mdl-mega-footer__top-section 컨테이너를 바닥 글 상단 섹션으로 식별합니다. 상단 섹션 "외부"div 요소에 필요합니다. |
| 삼 | mdl-mega-footer__left-section 컨테이너를 왼쪽 섹션으로 식별합니다. 왼쪽 섹션 "내부"div 요소에 필요합니다. |
| 4 | mdl-mega-footer__social-btn 메가 푸터 내에서 장식 사각형을 식별합니다. 버튼 요소에 필요합니다 (사용되는 경우). |
| 5 | mdl-mega-footer__right-section 컨테이너를 오른쪽 섹션으로 식별합니다. 오른쪽 섹션 "내부"div 요소에 필요합니다. |
| 6 | mdl-mega-footer__middle-section 컨테이너를 바닥 글 중간 섹션으로 식별합니다. 중간 섹션 "외부"div 요소에 필요합니다. |
| 7 | mdl-mega-footer__drop-down-section 컨테이너를 드롭 다운 (수직) 콘텐츠 영역으로 식별합니다. 드롭 다운 "내부"div 요소에 필요합니다. |
| 8 | mdl-mega-footer__heading 머리글을 메가 바닥 글 머리글로 식별합니다. 드롭 다운 섹션 내부의 h1 요소에 필요합니다. |
| 9 | mdl-mega-footer__link-list 정렬되지 않은 목록을 드롭 다운 (세로) 목록으로 식별합니다. 드롭 다운 섹션 내부의 ul 요소에 필요합니다. |
| 10 | mdl-mega-footer__bottom-section 컨테이너를 바닥 글 하단 섹션으로 식별합니다. 하단 섹션 "외부"div 요소에 필요합니다. |
| 11 | mdl-logo 컨테이너를 스타일이 지정된 섹션 표제로 식별합니다. 메가 푸터 하단 섹션 또는 미니 푸터 왼쪽 섹션의 "내부"div 요소에 필요합니다. |
| 12 | mdl-mini-footer 컨테이너를 MDL 미니 바닥 글 구성 요소로 식별합니다. 바닥 글 요소에 필요합니다. |
| 13 | mdl-mini-footer__left-section 컨테이너를 왼쪽 섹션으로 식별합니다. 왼쪽 섹션 "내부"div 요소에 필요합니다. |
| 14 | mdl-mini-footer__link-list 정렬되지 않은 목록을 인라인 (가로) 목록으로 식별합니다. "mdl-logo"div 요소에 대한 ul 요소 형제에 필요합니다. |
| 15 | mdl-mini-footer__right-section 컨테이너를 오른쪽 섹션으로 식별합니다. 오른쪽 섹션 "내부"div 요소에 필요합니다. |
| 16 | mdl-mini-footer__social-btn 미니 바닥 글 내에서 장식 사각형을 식별합니다. 버튼 요소에 필요합니다 (사용되는 경우). |
이제 바닥 글 스타일을 지정하기 위해 MDL 바닥 글 클래스를 사용하는 방법을 이해하는 몇 가지 예를 살펴 보겠습니다.
메가 바닥 글
사용에 대해 논의하겠습니다. mdl-mega-footer바닥 글의 레이아웃 내용에 클래스. 이 예제에서는 다음 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-mega-footer − 컨테이너를 MDL 메가 푸터 구성 요소로 식별합니다.
mdl-mega-footer__top-section − 컨테이너를 바닥 글 상단 섹션으로 식별합니다.
mdl-mega-footer__left-section − 컨테이너를 왼쪽 섹션으로 식별합니다.
mdl-mega-footer__social-btn − 미니 바닥 글 내에서 장식 사각형을 식별합니다.
mdl-mega-footer__right-section − 컨테이너를 오른쪽 섹션으로 식별합니다.
mdl-mega-footer__middle-section − 컨테이너를 바닥 글 중간 섹션으로 식별합니다.
mdl-mega-footer__drop-down-section − 컨테이너를 드롭 다운 (수직) 콘텐츠 영역으로 식별합니다.
mdl-mega-footer__heading − 머리글을 메가 바닥 글 머리글로 식별합니다.
mdl-mega-footer__link-list − 정렬되지 않은 목록을 인라인 (가로) 목록으로 식별합니다.
mdl-mega-footer__bottom-section − 컨테이너를 바닥 글 하단 섹션으로 식별합니다.
mdl-logo − 스타일이 지정된 섹션 제목으로 컨테이너를 식별합니다.
mdl_megafooter.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">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
미니 바닥 글
다음 예제는 mdl-mini-footer 바닥 글의 레이아웃 내용에 클래스.
이 예제에서는 아래에 제공된 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-mini-footer − 컨테이너를 MDL 미니 바닥 글 구성 요소로 식별합니다.
mdl-mini-footer__left-section − 컨테이너를 왼쪽 섹션으로 식별합니다.
mdl-logo -스타일이 지정된 섹션 제목으로 컨테이너를 식별합니다.
mdl-mini-footer__link-list − 정렬되지 않은 목록을 인라인 (가로) 목록으로 식별합니다.
mdl-mini-footer__right-section − 컨테이너를 오른쪽 섹션으로 식별합니다.
mdl_minifooter.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">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>결과
결과를 확인하십시오.
MDL 배지 구성 요소는 숫자 또는 아이콘이 될 수있는 화면 알림입니다. 일반적으로 항목 수를 강조하는 데 사용됩니다.
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 배지에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-badge 요소를 MDL 배지 구성 요소로 식별합니다. 스팬 또는 링크 요소에 필요합니다. |
| 2 | mdl-badge--no-background 배지에 열린 원 효과를 적용하며 선택 사항입니다. |
| 삼 | mdl-badge--overlap 배지를 컨테이너와 겹치게하며 선택 사항입니다. |
| 4 | data-badge="value" 속성으로 사용되는 배지에 문자열 값을 할당합니다. 스팬 또는 링크에 필요합니다. |
예
다음 예제는 mdl-badge 스팬 및 링크 요소에 알림을 추가하는 클래스.
이 예제에서는 아래에 제공된 MDL 클래스가 사용됩니다.
mdl-badge − 요소를 MDL 배지 구성 요소로 식별합니다.
data-badge− 배지에 문자열 값을 할당합니다. HTML 기호를 사용하여 아이콘을 할당 할 수 있습니다.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>결과
결과를 확인하십시오.
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 버튼에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-button 버튼을 MDL 구성 요소로 설정합니다. |
| 2 | mdl-js-button 버튼에 기본 MDL 동작을 추가합니다 (필수). |
| 삼 | (none) 평면 디스플레이 효과를 버튼 (기본값)으로 설정합니다. |
| 4 | mdl-button--raised 제기 된 표시 효과를 설정합니다. 이것은 fab, mini-fab 및 icon과 상호 배타적입니다. |
| 5 | mdl-button--fab 팹 (원형) 디스플레이 효과를 설정합니다. 이것은 제기, 미니 팹 및 아이콘과 상호 배타적입니다. |
| 6 | mdl-button--mini-fab 미니 팹 (소형 팹 원형) 디스플레이 효과를 설정합니다. 이것은 Raised, fab 및 icon과 상호 배타적입니다. |
| 7 | mdl-button--icon 아이콘 (작은 일반 원형) 표시 효과를 설정합니다. 이것은 Raised, fab 및 mini-fab과 상호 배타적입니다. |
| 8 | mdl-button--colored material.min.css에서 색상이 정의 된 색상 표시 효과를 설정합니다. |
| 9 | mdl-button--primary material.min.css에서 색상이 정의 된 기본 색상 표시 효과를 설정합니다. |
| 10 | mdl-button--accent material.min.css에서 색상이 정의 된 강조 색상 표시 효과를 설정합니다. |
| 11 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하고 다른 클래스와 함께 사용할 수 있습니다. |
예
다음 예제는 mdl-button 다양한 유형의 버튼을 표시하는 클래스.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 카드를 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-card div 요소를 "외부"div에 필요한 MDL 카드 컨테이너로 식별합니다. |
| 2 | mdl-card--border "내부"div에 적용되고 사용되는 카드 섹션에 테두리를 둡니다. |
| 삼 | mdl-shadow--2dp through mdl-shadow--16dp 카드에 가변 그림자 깊이 (2, 3, 4, 6, 8 또는 16)를 설정하고 선택 사항이며 "외부"div로 이동합니다. 생략하면 그림자가 표시되지 않습니다. |
| 4 | mdl-card__title div를 카드 제목 컨테이너로 식별하고 "내부"제목 div에 필요합니다. |
| 5 | mdl-card__title-text 카드 제목에 적절한 텍스트 특성을 넣고 제목 div 내부의 헤드 태그 (H1-H6)에 필요합니다. |
| 6 | mdl-card__subtitle-text 카드 자막에 텍스트 특성을 추가하며 선택 사항입니다. 제목 요소의 자식이어야합니다. |
| 7 | mdl-card__media div를 카드 미디어 컨테이너로 식별하며 "내부"미디어 div에 필요합니다. |
| 8 | mdl-card__supporting-text div를 카드 본문 텍스트 컨테이너로 식별하고 적절한 텍스트 특성을 본문 텍스트에 할당하며 "내부"본문 텍스트 div에 필요합니다. 텍스트는 중간 컨테이너없이 div 내부로 직접 이동합니다. |
| 9 | mdl-card__actions div를 카드 작업 컨테이너로 식별하고 작업 텍스트에 적절한 텍스트 특성을 할당하며 "내부"작업 div에 필요합니다. 콘텐츠는 중간 컨테이너없이 div 내부로 직접 이동합니다. |
예
다음 예제는 mdl-tooltip 클래스를 사용하여 다양한 유형의 툴팁을 표시하는 방법을 이해하는 데 도움이됩니다.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 진행률 표시 줄을 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-js-progress 기본 MDL 동작을 진행률 표시기로 설정하며 필수 클래스입니다. |
| 2 | mdl-progress__indeterminate 애니메이션을 진행률 표시기로 설정하며 선택적 클래스입니다. |
예
다음 예제는 mdl-js-progress 다양한 유형의 진행률 표시 줄을 표시하는 클래스.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 스피너를 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-spinner 컨테이너를 MDL 스피너 구성 요소로 식별하며 필수 클래스입니다. |
| 2 | mdl-js-spinner 기본 MDL 동작을 스피너로 설정하며 필수 클래스입니다. |
| 삼 | is-active 스피너를 표시하고 애니메이션하며 선택 사항입니다. |
| 4 | mdl-spinner--single-color 색상을 변경하는 대신 단일 색상을 사용하며 선택 사항입니다. |
예
다음 예제는 mdl-spinner 클래스 및 다양한 유형의 스피너.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 메뉴를 표시하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표는 사용 가능한 클래스와 그 효과를 나열합니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-button 버튼을 MDL 구성 요소로 식별하고 버튼 요소에 필요합니다. |
| 2 | mdl-js-button 기본 MDL 동작을 버튼으로 설정하며 버튼 요소에 필요합니다. |
| 삼 | mdl-button--icon 아이콘을 버튼으로 설정하며 버튼 요소에 필요합니다. |
| 4 | material-icons 범위를 재료 아이콘으로 식별하고 인라인 요소에 필요합니다. |
| 5 | mdl-menu 정렬되지 않은 목록 컨테이너를 MDL 구성 요소로 식별하며 ul 요소에 필요합니다. |
| 6 | mdl-js-menu 기본 MDL 동작을 메뉴로 설정하며 ul 요소에 필요합니다. |
| 7 | mdl-menu__item 버튼을 MDL 메뉴 옵션으로 식별하고 목록 항목 요소에 필요한 기본 MDL 동작을 설정합니다. |
| 8 | mdl-js-ripple-effect 옵션 링크에 잔물결 클릭 효과를 설정하며 선택 사항입니다. 정렬되지 않은 목록 요소에 필요합니다. |
| 9 | mdl-menu--top-left 버튼 위의 메뉴 위치를 설정하고 메뉴의 왼쪽 가장자리를 버튼과 정렬하며 선택 사항입니다. 정렬되지 않은 목록 요소에 필요합니다. |
| 10 | (none) 기본적으로 메뉴는 버튼 아래에 있으며 버튼이있는 왼쪽 가장자리에 정렬됩니다. |
| 11 | mdl-menu--top-right 메뉴는 버튼 위에 위치하며 버튼을 사용하여 오른쪽 가장자리에 정렬되며 선택 사항이며 정렬되지 않은 목록 요소로 이동합니다. |
| 12 | mdl-menu--bottom-right 메뉴는 버튼 아래에 있으며 버튼을 사용하여 오른쪽 가장자리에 정렬되며 선택 사항이며 정렬되지 않은 목록 요소로 이동합니다. |
예
다음 예제는 mdl-spinner 다양한 유형의 스피너를 보여줍니다.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 메뉴를 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-slider 입력 요소를 MDL 구성 요소로 식별하며 필수입니다. |
| 2 | mdl-js-slider 기본 MDL 동작을 입력 요소로 설정하며 필수입니다. |
예
다음 예제는 mdl-slider 클래스를 사용하여 다양한 유형의 슬라이더를 표시하는 방법을 이해하는 데 도움이됩니다.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 확인란을 표시하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-checkbox 레이블을 MDL 구성 요소로 식별하고 레이블 요소에 필요합니다. |
| 2 | mdl-js-checkbox 기본 MDL 동작을 레이블로 설정하고 레이블 요소에 필요합니다. |
| 삼 | mdl-checkbox__input 기본 MDL 동작을 확인란으로 설정하고 입력 요소 (확인란)에 필요합니다. |
| 4 | mdl-checkbox__label 기본 MDL 동작을 캡션으로 설정하고 스팬 요소 (캡션)에 필요합니다. |
| 5 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하며 선택 사항입니다. 입력 요소 (확인란)가 아니라 레이블 요소에갑니다. |
예
다음 예제는 mdl-slider 클래스를 사용하여 다양한 유형의 확인란을 표시하는 방법을 이해하는 데 도움이됩니다.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 라디오 버튼을 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-radio 레이블을 MDL 구성 요소로 식별하고 레이블 요소에 필요합니다. |
| 2 | mdl-js-radio 기본 MDL 동작을 레이블로 설정하고 레이블 요소에 필요합니다. |
| 삼 | mdl-radio__button 기본 MDL 동작을 라디오로 설정하고 입력 요소 (라디오 버튼)에 필요합니다. |
| 4 | mdl-radio__label 기본 MDL 동작을 캡션으로 설정하고 스팬 요소 (캡션)에 필요합니다. |
| 5 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하며 선택 사항입니다. 입력 요소 (라디오 버튼)가 아닌 레이블 요소에갑니다. |
예
다음 예제는 다양한 유형의 라디오 버튼을 표시하기 위해 mdl-slider 클래스를 사용하는 방법을 이해하는 데 도움이됩니다.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 확인란을 아이콘으로 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-icon-toggle 레이블을 MDL 구성 요소로 식별하고 레이블 요소에 필요합니다. |
| 2 | mdl-js-icon-toggle 기본 MDL 동작을 레이블로 설정하고 레이블 요소에 필요합니다. |
| 삼 | mdl-icon-toggle__input 기본 MDL 동작을 아이콘 전환으로 설정하고 입력 요소 (아이콘 전환)에 필요합니다. |
| 4 | mdl-icon-toggle__label 기본 MDL 동작을 캡션으로 설정하고 i 요소 (아이콘)에 필요합니다. |
| 5 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하며 선택 사항입니다. 입력 요소가 아닌 레이블 요소에갑니다 (아이콘 토글). |
예
다음 예제는 mdl-icon-toggle 다양한 유형의 확인란을 아이콘으로 표시하는 클래스입니다.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 확인란을 스위치로 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-switch 레이블을 MDL 구성 요소로 식별하고 레이블 요소에 필요합니다. |
| 2 | mdl-js-switch 기본 MDL 동작을 레이블로 설정하고 레이블 요소에 필요합니다. |
| 삼 | mdl-switch__input 전환 할 기본 MDL 동작을 설정하며 입력 요소 (스위치)에 필요합니다. |
| 4 | mdl-switch__label 기본 MDL 동작을 캡션으로 설정하고 입력 요소 (캡션)에 필요합니다. |
| 5 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하며 선택 사항입니다. 입력 요소 (스위치)가 아닌 레이블 요소에갑니다. |
예
다음 예제는 mdl-switch 클래스의 사용과 스위치로서의 다양한 유형의 확인란을 이해하는 데 도움이됩니다.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 테이블을 데이터 테이블로 표시하기위한 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-data-table 테이블을 MDL 구성 요소로 식별하고 테이블 요소에 필요합니다. |
| 2 | mdl-js-data-table 기본 MDL 동작을 테이블에 설정하고 테이블 요소에 필요합니다. |
| 삼 | mdl-data-table--selectable 모든 / 개별 선택 가능한 동작 (확인란)을 설정하며 선택 사항입니다. 테이블 요소로 이동합니다. |
| 4 | mdl-data-table__cell--non-numeric 텍스트 서식을 데이터 셀에 설정하며 선택 사항입니다. 테이블 헤더와 테이블 데이터 셀 모두에 적용됩니다. |
| 5 | (none) 기본적으로 숫자 형식을 머리글 또는 데이터 셀로 설정합니다. |
예
다음 예제는 mdl-data-table 데이터 테이블을 표시하는 클래스.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 텍스트 입력을 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-textfield 컨테이너를 MDL 구성 요소로 식별하며 "외부"div 요소에 필요합니다. |
| 2 | mdl-js-textfield 기본 MDL 동작을 입력으로 설정하며 "외부"div 요소에 필요합니다. |
| 삼 | mdl-textfield__input 요소를 텍스트 필드 입력으로 식별하며 입력 또는 텍스트 영역 요소에 필요합니다. |
| 4 | mdl-textfield__label 요소를 텍스트 필드 레이블로 식별하고 입력 또는 텍스트 영역 요소의 레이블 요소에 필요합니다. |
| 5 | mdl-textfield--floating-label 부동 레이블 효과를 적용하며 선택 사항입니다. "외부"div 요소로 이동합니다. |
| 6 | mdl-textfield__error 스팬을 MDL 오류 메시지로 식별하며 선택 사항입니다. 패턴이있는 MDL 입력 요소의 스팬 요소로 이동합니다. |
| 7 | mdl-textfield--expandable div를 MDL 확장 가능 텍스트 필드 컨테이너로 식별합니다. 확장 가능한 입력 필드에 사용되며 "외부"div 요소에 필요합니다. |
| 8 | mdl-button 레이블을 MDL 아이콘 단추로 식별합니다. 확장 가능한 입력 필드에 사용되며 "외부"div의 레이블 요소에 필요합니다. |
| 9 | mdl-js-button 아이콘 컨테이너에 기본 동작을 설정합니다. 확장 가능한 입력 필드에 사용되며 "외부"div의 레이블 요소에 필요합니다. |
| 10 | mdl-button--icon 레이블을 MDL 아이콘 컨테이너로 식별합니다. 확장 가능한 입력 필드에 사용되며 "외부"div의 레이블 요소에 필요합니다. |
| 11 | mdl-input__expandable-holder 컨테이너를 MDL 구성 요소로 식별합니다. 확장 가능한 입력 필드에 사용되며 "내부"div 요소에 필요합니다. |
| 12 | is-invalid 초기로드시 텍스트 필드를 유효하지 않은 것으로 식별하고 mdl-textfield 요소에서 선택 사항입니다. |
예
다음 예제는 다양한 유형의 텍스트 필드를 표시하기 위해 mdl-textfield 클래스의 사용을 이해하는 데 도움이됩니다.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.
MDL은 미리 정의 된 다양한 시각적 및 동작 향상을 적용하고 다양한 유형의 도구 설명을 표시하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-tooltip 컨테이너를 MDL 도구 설명으로 식별하며 도구 설명 컨테이너 요소에 필요합니다. |
| 2 | mdl-tooltip--large 큰 글꼴 효과를 설정하며 선택 사항입니다. 툴팁 컨테이너 요소로 이동합니다. |
예
다음 예제는 mdl-tooltip 다양한 유형의 툴팁을 표시하는 클래스.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>결과
결과를 확인하십시오.