Materialise-퀵 가이드
Materialise는 CSS, JavaScript, HTML로 생성 된 UI 컴포넌트 라이브러리입니다. Materialise 재사용 가능한 UI 구성 요소는 브라우저 이식성, 장치 독립성 및 정상적인 성능 저하와 같은 최신 웹 디자인 원칙을 준수하면서 매력적이고 일관 적이며 기능적인 웹 페이지 및 웹 앱을 구성하는 데 도움이됩니다.
그 두드러진 특징 중 일부는 다음과 같습니다.
내장 반응 형 디자인.
최소한의 공간을 차지하는 표준 CSS.
머티리얼 디자인 개념을 따르도록 조정 된 버튼, 체크 박스 및 텍스트 필드와 같은 공통 사용자 인터페이스 컨트롤의 새로운 버전.
카드, 탭, 내비게이션 바, 토스트 등과 같은 강화되고 특화된 기능.
무료로 사용할 수 있으며 제대로 작동하려면 jQuery JavaScript 라이브러리가 필요합니다.
브라우저 간이며 재사용 가능한 웹 구성 요소를 만드는 데 사용할 수 있습니다.
반응 형 디자인
Materialise는 반응 형 디자인이 내장되어 있으므로 Materialise를 사용하여 만든 웹 사이트는 장치 크기에 따라 자체적으로 재 설계됩니다. Materialise 클래스는 웹 사이트가 모든 화면 크기에 맞도록 만들어집니다.
Materialise를 사용하여 만든 웹 사이트는 PC, 태블릿 및 모바일 장치와 완벽하게 호환됩니다.
확장 가능
Materialise는 설계 상 매우 최소화되고 평평합니다. 기존 CSS 규칙을 덮어 쓰는 것보다 새 CSS 규칙을 추가하는 것이 훨씬 쉽다는 점을 고려하여 설계되었습니다. 그림자와 대담한 색상을 지원합니다. 색상과 음영은 다양한 플랫폼과 장치에서 균일하게 유지됩니다.
그리고 무엇보다 가장 중요한 것은 완전히 무료입니다.
이 장에서는 Materialise에 적합한 환경을 설정하는 다양한 측면에 대해 설명합니다.
옵션 온라인 시도
Materialise 프로그래밍 환경을 온라인으로 설정하여 사용 가능한 모든 예제를 온라인으로 컴파일하고 실행할 수 있습니다. 읽고있는 내용에 대한 확신을주고 다양한 옵션으로 프로그램을 확인할 수 있습니다. 모든 예제를 자유롭게 수정하고 온라인에서 실행하십시오.
CodingGround 에서 제공되는 온라인 컴파일러를 사용하여 다음 예제를 시도해보십시오.
<!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body> <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div> </body> </html>이 튜토리얼에서 제공하는 대부분의 예제에 대해 온라인 컴파일러로 이동하는 오른쪽 상단의 웹 사이트 코드 섹션에서 Try it 옵션을 찾을 수 있습니다. 그러니 그것을 활용하고 학습을 즐기십시오.
Materialise를 사용하는 방법?
Materialise를 사용하는 두 가지 방법이 있습니다-
Local Installation − 당신은 materialize.min.css 과 materialize.min.js 로컬 컴퓨터에 파일을 저장하고 HTML 코드에 포함합니다.
CDN Based Version − 다음을 포함 할 수 있습니다. materialize.min.css 과 materialize.min.js CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다.
로컬 설치
이동 http://materializecss.com/getting-started.html 사용 가능한 최신 버전을 다운로드하십시오.
그런 다음 다운로드 한 materialize.min.js 웹 사이트의 디렉토리에있는 파일 (예 : / js 및 materialize.min.css / css에서.
예
포함 css 과 js 다음과 같이 HTML 파일의 파일.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "/materialize/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "/materialize/materialize.min.js"></script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>다음 결과가 생성됩니다.
CDN 기반 버전
다음을 포함 할 수 있습니다. materialize.min.js 과 materialize.min.css CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다. cdnjs.cloudflare.com 최신 버전의 콘텐츠를 제공합니다.
이 자습서에서는 cdnjs.cloudflare.com CDN 버전의 라이브러리를 사용하고 있습니다.
예
위의 예를 다음을 사용하여 다시 작성하십시오. materialize.min.css 과 materialize.min.js cdnjs.cloudflare.com CDN에서.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>다음 결과가 생성됩니다-
Materialise는 다양한 색상 클래스 세트를 지원합니다. 이러한 색상 클래스는 마케팅, 도로 표지판 및 스티커 메모에 사용되는 색상을 고려하여 영감을 얻고 개발되었습니다.
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- black
- white
- transparent
용법
다음은 적용된 색상을 변경하는 데 사용할 수있는 밝기 / 어둡기 클래스 목록입니다.
- lighten-1
- lighten-2
- lighten-3
- lighten-4
- lighten-5
- darken-1
- darken-2
- darken-3
- darken-4
- accent-1
- accent-2
- accent-3
- accent-4
예
다음 예제는 위의 클래스를 사용하여 배경을 렌더링하거나 텍스트 색상을 변경하는 방법을 보여줍니다. 배경의 경우 클래스를 추가하고 텍스트의 경우 색상 클래스에 접미사 '-text'를 추가하고 번개 클래스에 접두사 'text-'를 추가합니다.
materialize_colors.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Colors Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<h2>Color Theme Demo</h2>
<hr/>
<div class = "card-panel">
<div class = "card-panel red lighten-2">
<h1>Red Colored Theme</h1>
</div>
<span class = "red-text text-darken-2">
<h2>Red Colored Text</h2>
</span>
<ul>
<li class = "red lighten-5"><p>Using red lighten-5</p></li>
<li class = "red lighten-4"><p>Using red lighten-4</p></li>
<li class = "red lighten-3"><p>Using red lighten-3</p></li>
<li class = "red lighten-2"><p>Using red lighten-2</p></li>
<li class = "red lighten-1"><p>Using red lighten-1</p></li>
<li class = "red"><p>Using red</p></li>
<li class = "red darken-1"><p>Using red darken-1</p></li>
<li class = "red darken-2"><p>Using red darken-2</p></li>
<li class = "red darken-3"><p>Using red darken-3</p></li>
<li class = "red darken-4"><p>Using red darken-4</p></li>
<li class = "red accent-1"><p>Using red accent-1</p></li>
<li class = "red accent-2"><p>Using red accent-2</p></li>
<li class = "red accent-3"><p>Using red accent-3</p></li>
<li class = "red accent-4"><p>Using red accent-4</p></li>
</ul>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 12 개 컬럼 유체 응답 그리드를 제공합니다.
행 및 열 스타일 클래스를 사용하여 각각 행과 열을 정의합니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | row 반응 형 열에 사용할 패딩이없는 컨테이너를 지정합니다. 이 클래스는 반응 형 클래스가 완전히 반응하려면 필수입니다. |
| 2 | col 하위 클래스가있는 열을 지정합니다. |
col 다양한 화면 유형을위한 여러 하위 클래스가 있습니다.
소형 화면 장치 용 컬럼
다음은 작은 화면 장치 (일반적으로 스마트 폰)에 대한 열 수준 스타일 목록입니다.
| Sr. 아니. | 클래스 이름 및 설명 | |
|---|---|---|
| 1 | s1 너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다. |
|
| 2 | s2 너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다. |
|
| 삼 | s3 너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다. |
|
| 4 | s4 너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다. |
|
| s5 - s11 | ||
| 12 | s12 너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 소형 화면 전화기의 기본 클래스입니다. |
|
중형 화면 장치 용 컬럼
다음은 중간 화면 장치 (일반적으로 태블릿)의 열 수준 스타일 목록입니다.
| Sr. 아니. | 클래스 이름 및 설명 | |
|---|---|---|
| 1 | m1 너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다. |
|
| 2 | m2 너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다. |
|
| 삼 | m3 너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다. |
|
| 4 | m4 너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다. |
|
| m5 - m11 | ||
| 12 | m12 너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 중형 화면 전화기의 기본 클래스입니다. |
|
대형 화면 장치 용 컬럼
다음은 일반적으로 랩톱과 같은 대형 화면 장치의 열 수준 스타일 목록입니다.
| Sr. 아니. | 클래스 이름 및 설명 | |
|---|---|---|
| 1 | l1 너비가 08.33 % 인 열 12 개 중 1 개를 정의합니다. |
|
| 2 | l2 너비가 16.66 % 인 열 12 개 중 2 개를 정의합니다. |
|
| 삼 | l3 너비가 25.00 % 인 열 12 개 중 3 개를 정의합니다. |
|
| 4 | l4 너비가 33.33 % 인 열 12 개 중 4 개를 정의합니다. |
|
| l5 - l11 | ||
| 12 | l12 너비가 100 % 인 열 12 개 중 12 개를 정의합니다. 대형 화면 장치의 기본 클래스입니다. |
|
용법
각 하위 클래스는 장치 유형에 따라 사용할 그리드의 열 수를 결정합니다. 다음 HTML 스 니펫을 고려하십시오.
<div class = "row">
<div class = "col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
a large screen.</p>
</div>
</div>HTML 요소의 클래스 속성에 하위 클래스가 언급되지 않은 경우 사용할 기본 열은 장치에서 12 개입니다.
예
materialize_grids.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Grids Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class = "row">
<div class = "col m1 grey center">1</div>
<div class = "col m1 center">2</div>
<div class = "col m1 grey center">3</div>
<div class = "col m1 center">4</div>
<div class = "col m1 grey center">5</div>
<div class = "col m1 center">6</div>
<div class = "col m1 center grey">7</div>
<div class = "col m1 center">8</div>
<div class = "col m1 center grey">9</div>
<div class = "col m1 center">10</div>
<div class = "col m1 center grey">11</div>
<div class = "col m1 center">12</div>
</div>
<div class = "row">
<div class = "col m4 l3 yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
and 3 on a large screen (l3).</p>
</div>
<div class = "col s4 m8 l9 grey">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
(m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise에는 일상적인 설계 요구에 유용한 여러 유틸리티 클래스가 있습니다.
Color utility classes − 예 : .red, .green, .grey 등
Alignment utility classes − 예 : .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
Hiding Content utility classes as per device size − 예 : .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up 및 .hide-on- 대형 전용
Formatting utility classes − 예 : truncate, hoverable
예
materialize_utilities.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Materialize Utilities</h2>
<hr/>
<h3>Color Utilities Demo</h3>
<div class = "red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.</p>
</div>
<div class = "green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.</p>
</div>
<h3>Alignment Utilities Demo</h3>
<div class = "card-panel valign-wrapper">
<p class = "valign">Vertically Aligned Text</p>
</div>
<div class = "card-panel">
<div><p class = "left-align">Left Aligned Text</p></div>
<div><p class = "right-align">Right Aligned Text</p></div>
<div><p class = "center-align">Center Aligned Text</p></div>
</div>
<h3>Hide Utilities Demo</h3>
<div class = "hide">
<p>Hidden on all devices</p>
</div>
<div class = "hide-on-small-only">
<p>Hidden on mobile devices</p>
</div>
<h3>Formatting Utilities Demo</h3>
<div class = "card-panel">
<p class = "truncate">The latest versions of Apple Safari, Google Chrome,
Mozilla Firefox, and Opera all support many HTML5 features and Internet
Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "card-panel hoverable">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.</p>
</div>
<h3>Center Utility Demo</h3>
<div class = "card-panel center">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise에는 다양한 크기에 반응하는 이미지와 비디오를 만드는 몇 가지 클래스가 있습니다.
responsive-img − 화면 크기에 따라 이미지 크기가 자동 조정됩니다.
video-container − 동영상이 포함 된 반응 형 컨테이너 용.
responsive-video − HTML5 비디오를 반응 형으로 만듭니다.
예
materialize_media.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Materialize Media Examples</h2>
<hr/>
<h3>Images Demo</h3>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">
</div>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">
</div>
<h3>Responsive Embeded Video Demo</h3>
<div class = "video-container">
<iframe width = "540" height = "200"
src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
frameborder = "0" allowfullscreen></iframe>
</div>
<div class = "video-container">
<video width = "300" height = "200" controls autoplay>
<source src = "http://www.tutorialspoint.com/html5/foo.ogg" type = "video/ogg" />
<source src = "http://www.tutorialspoint.com/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise에는 그림자가있는 종이와 같은 카드로 컨테이너를 표시하는 몇 가지 특수 클래스가 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | z-depth-0 기본적으로 z 깊이가있는 요소의 그림자를 제거합니다. |
| 2 | z-depth-1 테두리가 1px 인 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 1을 추가합니다. |
| 삼 | z-depth-2 2px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 2를 추가합니다. |
| 4 | z-depth-3 3px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 3을 추가합니다. |
| 5 | z-depth-4 4px 테두리가있는 그림자로 모든 HTML 콘텐츠에 대한 컨테이너 스타일을 지정합니다. z 깊이 4를 추가합니다. |
| 6 | z-depth-5 5px 테두리가있는 그림자로 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 5를 추가합니다. |
예
materialize_shadows.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Materialize Shadow Examples</h2>
<hr/>
<div class = "card-panel">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-1">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-2">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-3">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-4">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-5">
<p><b>TODO:</b> Learn HTML5</p>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 테이블에 대한 다양한 스타일을 사용하여 다양한 유형의 테이블을 표시하는 데 사용할 수 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | None 테두리가없는 기본 테이블을 나타냅니다. |
| 2 | stripped 제거 된 테이블을 표시합니다. |
| 삼 | bordered 행에 테두리가있는 표를 그립니다. |
| 4 | highlight 강조 표시된 표를 그립니다. |
| 5 | centered 모든 텍스트 중심이 테이블에 정렬 된 테이블을 그립니다. |
| 6 | responsive-table 화면이 너무 작아 콘텐츠를 표시 할 수없는 경우 가로 스크롤 막대를 표시하는 반응 형 표를 그립니다. |
예
materialize_tables.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table>
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table with borders</h3>
<table class = "striped bordered">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Centered Table</h3>
<table class = "centered">
<thead>
<tr><th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Responsive table</h3>
<table class = "responsive-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Data #1</th>
<th>Data #2</th>
<th>Data #3</th>
<th>Data #4</th>
<th>Data #5</th>
<th>Data #6</th>
<th>Data #7</th>
<th>Data #8</th>
<th>Data #9</th>
<th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>결과
결과를 확인하십시오.
용도 구체화 Roboto 2.0표준 글꼴로. 다음 CSS 스타일을 사용하여 재정의 할 수 있습니다.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}다음은 제목, 인용구 및 자유 흐름이지만 반응이 빠른 텍스트의 예입니다.
예
materialize_typography.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Typography Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Typography Demo</h2>
<hr/>
<h3>Headings</h3>
<div class = "card-panel">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<h3>Block Quotes</h3>
<div class = "card-panel">
<blockquote>
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</blockquote>
</div>
<h3>Responsive free-flow text</h3>
<div class = "card-panel">
<p class = "flow-text">
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</p>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise 배지 구성 요소는 화면 알림이며 숫자 또는 아이콘 일 수 있습니다. 일반적으로 항목 수를 강조하는 데 사용됩니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | badge 요소를 MDL 배지 구성 요소로 식별합니다. 스팬 요소에 필요합니다. |
| 2 | new 배지 구성 요소에 "새"클래스를 추가하면 배경이 제공됩니다. |
다음은 다양한 방법으로 배지를 사용하는 예입니다.
예
materialize_badges.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Badges Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Badges Demo</h2>
<hr/>
<h3>Badges in List</h3>
<div class = "collection">
<a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
<a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
<a href = "#" class = "collection-item">Sent</a>
<a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
</div>
<h3>Badges in dropdowns</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
<h3>Badges in Navigation</h3>
<nav>
<div class = "nav-wrapper">
<a href = "" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "">Inbox</a></li>
<li><a href = "">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox</a></li>
</ul>
</div>
</nav>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 버튼에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | btn 버튼 또는 앵커를 구체화 버튼으로 설정합니다 (필수). 버튼에 제기 된 표시 효과를 설정합니다. |
| 2 | btn-floating 원형 버튼을 만듭니다. |
| 삼 | btn-flat 평면 디스플레이 효과를 버튼으로 설정합니다 (기본값). |
| 4 | btn-large 큰 버튼을 만듭니다. |
| 5 | disabled 비활성화 된 버튼을 생성합니다. |
| 6 | type = "submit" 앵커 또는 버튼을 기본 버튼으로 나타냅니다. |
| 7 | waves-effect 잔물결 클릭 효과를 설정하고 다른 클래스와 함께 사용할 수 있습니다. |
예
다음 예제는 mdl-button 클래스를 사용하여 다양한 유형의 버튼을 표시하는 방법을 보여줍니다.
materialize_buttons.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Buttons Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "card-panel">
<h5>Raised Buttons</h5>
<button class = "btn waves-effect waves-teal">Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons left">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons right">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal disabled">Add</button></td>
</div>
<div class = "card-panel">
<h5>Flat Buttons</h5>
<button class = "btn-flat waves-effect waves-teal">Add</button></td>
<button class = "btn-flat waves-effect waves-teal disabled" >
<i class = "material-icons left">add</i>Add</button></td>
</div>
<div class = "card-panel">
<h5>Floating Buttons</h5>
<a class = "btn-floating waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating waves-effect waves-light red disabled" >
<i class = "material-icons">add</i></a>
</div>
<div class = "card-panel">
<h5>Primary Buttons</h5>
<button class = "btn waves-effect waves-light red" type = "submit">Send
<i class = "material-icons right">send</i></button>
<button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
<i class = "material-icons right">cancel</i></button>
</div>
<div class = "card-panel">
<h5>Large Buttons</h5>
<a class = "btn-floating btn-large waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating btn-large waves-effect waves-light red disabled">
<i class = "material-icons">add</i></a>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 CSS 클래스를 제공하여 쉬운 방법으로 멋진 이동 경로를 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | nav-wrapper 탐색 구성 요소를 탐색 경로 / 탐색 막대 래퍼로 설정합니다. |
| 2 | breadcrumb 앵커 요소를 이동 경로로 설정합니다. 마지막 앵커 요소는 활성화되고 나머지는 회색으로 표시됩니다. |
예
다음 예제는 탐색 표시 줄을 표시하기 위해 이동 경로 클래스를 사용하는 방법을 보여줍니다.
materialize_breadcrumb.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize BreadCrumb Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<nav>
<div class = "nav-wrapper">
<div class = "col s12">
<a href = "#" class = "breadcrumb">Home</a>
<a href = "#" class = "breadcrumb">Technology</a>
<a href = "#" class = "breadcrumb">HTML5</a>
</div>
</div>
</nav>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 유형의 카드를 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하기 위해 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | card div 요소를 Materialise 카드 컨테이너로 식별합니다. "외부"div에 필요합니다. |
| 2 | card-content div를 카드 콘텐츠 컨테이너로 식별하며 "내부"div에 필요합니다. |
| 삼 | card-title div를 카드 제목 컨테이너로 식별하고 "내부"제목 div에 필요합니다. |
| 4 | card-action div를 카드 작업 컨테이너로 식별하고 작업 텍스트에 적절한 텍스트 특성을 할당합니다. "내부"작업 div에 필요합니다. 콘텐츠는 중간 컨테이너없이 div 내부로 직접 이동합니다. |
| 5 | card-image div를 카드 이미지 컨테이너로 식별하고 "내부"div에 필요합니다. |
| 6 | card-reveal div를 공개 된 텍스트 컨테이너로 식별합니다. |
| 7 | activator div를 공개 된 텍스트 컨테이너 및 공개 할 이미지로 식별합니다. 이미지와 관련된 상황 정보를 표시하는 데 사용됩니다. |
| 8 | card-panel div를 그림자와 패딩이있는 간단한 카드로 식별합니다. |
| 9 | card-small div를 작은 크기의 카드로 식별합니다. 높이 : 300px; |
| 10 | card-medium div를 중간 크기 카드로 식별합니다. 높이 : 400px; |
| 11 | card-large div를 대형 카드로 식별합니다. 높이 : 500px; |
예
다음 예제는 다양한 유형의 카드를 보여주기위한 카드 클래스 사용을 보여줍니다.
materialize_cards.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Cards Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row">
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-content">
<span class = "card-title"><h3>Learn HTML5</h3></span>
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-image">
<img src = "html5-mini-logo.jpg">
</div>
<div class = "card-content">
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-image waves-effect waves-block waves-light">
<img class = "activator" src = "html5-mini-logo.jpg">
</div>
<div class = "card-content activator">
<p>Click the image to reveal more information.</p>
</div>
<div class = "card-reveal">
<span class = "card-title grey-text text-darken-4">HTML5
<i class = "material-icons right">close</i></span>
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col s12 m3">
<div class = "card-panel teal">
<span class = "white-text">Simple Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card small teal">
<span class = "white-text">Small Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card medium teal">
<span class = "white-text">Medium Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card large teal">
<span class = "white-text">Large Card</span>
</div>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 작은 정보 집합을 표현하는 데 사용할 수있는 Chip이라는 특수 구성 요소를 제공합니다. 예 : 연락처, 태그 등
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | chip div 컨테이너를 칩으로 설정합니다. |
예
다음 예제는 다양한 유형의 태그 생성을 보여주기 위해 칩 클래스를 사용하는 방법을 보여줍니다.
materialize_chips.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Chips Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "chip">
<img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg">HTML 5
</div>
<div class = "chip">
HTML 5<i class = "material-icons">close</i>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 유형의 컬렉션을 나타내는 특수 클래스를 제공합니다. 여기서 컬렉션은 관련 정보 항목 그룹을 나타냅니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | collection div 또는 ul 컨테이너를 컬렉션으로 설정합니다. |
| 2 | collection-item a 또는 li 항목을 컬렉션 항목으로 설정합니다. |
| 삼 | active a 또는 li 항목을 활성 컬렉션 항목으로 표시합니다. |
| 4 | with-header 컬렉션에 헤더를 표시합니다. |
| 5 | collection-header a 또는 li 항목을 컬렉션 헤더로 설정합니다. |
| 6 | avatar a 또는 li 항목을 아바타 항목으로 설정합니다. |
| 7 | dismissible 컬렉션 항목을 스 와이프 할 수 있습니다. 터치 스크린 장치에서만 작동합니다. |
예
다음 예제는 컬렉션 클래스를 사용하여 다양한 유형의 컬렉션 생성을 보여줍니다.
materialize_collections.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Collections Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Simple Collection</h3><hr/>
<ul class = "collection">
<li class = "collection-item">HTML 5</li>
<li class = "collection-item">JQuery</li>
<li class = "collection-item">JavaScript</li>
<li class = "collection-item">CSS</li>
</ul>
<h3>Collection of Links</h3><hr/>
<div class = "collection">
<a href = "#" class = "collection-item">HTML 5</a>
<a href = "#!" class = "collection-item active">JQuery</a>
<a href = "#!" class = "collection-item">JavaScript</a>
<a href = "#!" class = "collection-item">CSS</a>
</div>
<h3>Collection with Header</h3><hr/>
<ul class = "collection with-header">
<li class = "collection-header"><h3>Front End Technologies</h3></li>
<li class = "collection-item">HTML 5</li>
<li class = "collection-item">JQuery</li>
<li class = "collection-item">JavaScript</li>
<li class = "collection-item">CSS</li>
</ul>
<h3>Collection with Secondary Content</h3><hr/>
<ul class = "collection">
<li class = "collection-item">
<div>HTML 5<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>JQuery<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>JavaScript<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>CSS<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
</ul>
<h3>Collection with Avatar</h3><hr/>
<ul class = "collection">
<li class = "collection-item avatar">
<img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
<span class = "title">HTML5</span>
<p>HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
structuring and presenting content on the World Wide Web.</p>
<a href = "#!" class = "secondary-content"><i class = "material-icons">
grade</i></a>
</li>
<li class = "collection-item avatar">
<i class = "material-icons circle green">insert_chart</i>
<span class = "title">HighCharts</span>
<p></p>
<a href = "#!" class = "secondary-content"><i class = "material-icons">
grade</i></a>
</li>
</ul>
<h3>Collection with dismissible content</h3><hr/>
<ul class = "collection">
<li class = "collection-item dismissable">HTML 5</li>
<li class = "collection-item dismissable">JQuery</li>
<li class = "collection-item dismissable">JavaScript</li>
<li class = "collection-item dismissable">CSS</li>
</ul>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 컬렉션이 관련 정보 항목 그룹을 나타내는 다양한 유형의 컬렉션을 나타내는 특수 클래스를 제공합니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | page-footer div 컨테이너를 바닥 글로 설정합니다. |
| 2 | footer-copyright div 컨테이너를 바닥 글-저작권 컨테이너로 설정합니다. |
예
다음 예제는 바닥 글 클래스를 사용하여 샘플 바닥 글을 표시하는 방법을 보여줍니다.
materialize_footer.htm
<html>
<head>
<title>The Materialize Collections Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<footer class = "page-footer">
<div class = "row">
<div class = "col s12 m6 l6">
<h5 class = "white-text">Footer Content</h5>
</div>
<div class = "col">
<ul>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Help</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Privacy and Terms</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
User Agreement</a></li>
</ul>
</div>
</div>
<div class = "footer-copyright">
<div class = "container">
© 2016 Copyright Information
<a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
</div>
</div>
</footer>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 양식 디자인을위한 매우 아름답고 반응이 빠른 CSS를 가지고 있습니다. 다음 CSS가 사용됩니다-
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | input-field div 컨테이너를 입력 필드 컨테이너로 설정합니다. 필수입니다. |
| 2 | validate 입력 필드에 유효성 검사 스타일을 추가합니다. |
| 삼 | active 활성 스타일로 입력을 표시합니다. |
| 4 | materialize-textarea 텍스트 영역의 스타일을 지정하는 데 사용됩니다. 텍스트 영역은 내부 텍스트에 맞게 자동으로 크기가 조정됩니다. |
| 5 | filled-in 채워진 상자 스타일로 확인란을 표시합니다. |
예
다음 예제는 샘플 양식을 보여주기 위해 입력 클래스를 사용하는 방법을 보여줍니다.
materialize_forms.htm
<html>
<head>
<title>The Materialize Form Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row">
<form class = "col s12">
<div class = "row">
<div class = "input-field col s6">
<i class = "material-icons prefix">account_circle</i>
<input placeholder = "Username" value = "Mahesh" id = "name"
type = "text" class = "active validate" required />
<label for = "name">Username</label>
</div>
<div class = "input-field col s6">
<label for = "password">Password</label>
<input id = "password" type = "password" placeholder = "Password"
class = "validate" required />
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Email" id = "email" type = "email"
class = "validate">
<label for = "email">Email</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<i class = "material-icons prefix">mode_edit</i>
<textarea id = "address" class = "materialize-textarea"></textarea>
<label for = "address">Address</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Comments (Disabled)" id = "comments"
type = "text" disabled />
<label for = "comments">Comments</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "married" type = "checkbox" checked = "checked" />
<label for = "married">Married</label>
</p>
<p>
<input id = "single" type = "checkbox" class = "filled-in" />
<label for = "single">Single</label>
</p>
<p>
<input id = "dontknow" type = "checkbox" disabled = "disabled" />
<label for = "dontknow">Don't know (Disabled)</label>
</p>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "male" type = "radio" name = "gender"
value = "male" checked />
<label for = "male">Male</label>
</p>
<p>
<input id = "female" type = "radio" name = "gender"
value = "female" checked />
<label for = "female">Female</label>
</p>
<p>
<input id = "dontknow1" type = "radio" name = "gender"
value = "female" disabled />
<label for = "dontknow1">Don't know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>결과
결과를 확인하십시오.
중요한 입력 컨트롤
Materialise는 다양한 유형의 입력 컨트롤을위한 CSS를 제공합니다. 다음 표는 동일합니다.
| Sr. 아니. | 입력 유형 이름 및 설명 |
|---|---|
| 1 | 고르다 다양한 유형의 선택 입력 |
| 2 | 스위치 다양한 유형의 스위치 |
| 삼 | 파일 다양한 유형의 파일 입력 |
| 4 | 범위 다양한 유형의 범위 입력 |
| 5 | 날짜 선택기 날짜 선택기 |
| 6 | 캐릭터 카운터 캐릭터 카운터 |
Materialise는 다음과 같은 인기있는 아이콘 라이브러리를 지원합니다.
- 글꼴 굉장 아이콘
- Google Material 아이콘
- 부트 스트랩 아이콘
용법
아이콘을 사용하려면 HTML <i> 요소의 클래스에 아이콘 이름을 넣으십시오. 아이콘의 크기를 제어하려면 다음 클래스를 사용할 수 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | tiny 매우 작은 크기의 아이콘을 그립니다. 1rem. |
| 2 | small 작은 크기의 아이콘을 그립니다. 2rem. |
| 삼 | medium 중간 크기의 아이콘을 그립니다. 4rem. |
| 4 | large 큰 아이콘을 그립니다. 6rem. |
예
materialize_icons.htm
<html>
<head>
<title>The Materialize Icons Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class = "container">
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud tiny"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud medium"></i>
<i class = "fa fa-cloud large"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons tiny">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons">cloud</i>
<i class = "material-icons medium">cloud</i>
<i class = "material-icons large">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud tiny"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud medium"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 CSS 클래스를 제공하여 간편한 방법으로 멋진 탐색 모음을 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | nav-wrapper nav 구성 요소를 nav bar / breadcrumb wrapper로 설정합니다. |
| 2 | brand-logo 앵커 요소를 기본 로고로 설정합니다. |
| 삼 | nav-mobile ul 요소를 탐색 모음으로 설정합니다. |
예
다음 예제는 navbar 클래스를 사용하여 다양한 탐색 모음을 표시하는 방법을 보여줍니다.
materialize_navbar.htm
<html>
<head>
<title>The Materialize NavBar Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$( document ).ready(function()) { $(".dropdown-button").dropdown();
});
</script>
</head>
<body class = "container">
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Right Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Left Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Center Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">Java</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Active link</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li class = "active"><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with dropdown menu</h5>
<ul id = "javaDropDown" class = "dropdown-content">
<li><a href = "#!">JSF</a></li>
<li><a href = "#!">JSP</a></li>
<li class = "divider"></li>
<li><a href = "#!">Servlets</a></li>
</ul>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class = "dropdown-button" href = "#!"
data-activates = "javaDropDown">Java<i class = "material-icons
right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Links and Icons</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#"><i class = "material-icons left">search</i>
HTML5</a></li>
<li><a href = "#"><i class = "material-icons right">view_module</i>
CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 CSS 클래스를 제공하여 멋진 페이지 매김 막대를 쉽게 만들 수 있습니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | pagination ul 요소를 페이지 매김 구성 요소로 설정합니다. |
예
다음 예제는 navbar 클래스를 사용하여 페이지 매김 막대를 표시하는 방법을 보여줍니다.
materialize_pagination.htm
<html>
<head>
<title>The Materialize Pagination Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Materialize Pagination</h5>
<ul class = "pagination">
<li class = "disabled"><a href = "#!">
<i class = "material-icons">chevron_left</i></a></li>
<li class = "active"><a href = "#!">1</a></li>
<li class = "waves-effect"><a href = "#!">2</a></li>
<li class = "waves-effect"><a href = "#!">3</a></li>
<li class = "waves-effect"><a href = "#!">4</a></li>
<li class = "waves-effect"><a href = "#!">5</a></li>
<li class = "waves-effect"><a href = "#!">
<i class = "material-icons">chevron_right</i></a></li>
</ul>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 유형의 프리 로더 또는 진행률 표시 줄을 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | progress 요소를 진행 구성 요소로 식별합니다. div 요소에 필요합니다. |
| 2 | determinate 기본 구체화 동작을 진행률 표시기로 설정합니다. |
| 삼 | indeterminate 애니메이션을 진행률 표시기로 설정합니다. |
예
다음은 다양한 방식으로 프리 로더를 사용하는 예입니다.
materialize_preloader.htm
<html>
<head>
<title>The Materialize Preloader Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h4>Default Preloader</h4>
<div class = "progress">
<div class = "determinate" style = "width: 50%"></div>
</div>
<h4>Indeterminate Preloader</h4>
<div class = "progress">
<div class = "indeterminate"></div>
</div>
<h4>Circular Preloader</h4>
<div class = "preloader-wrapper big active">
<div class = "spinner-layer spinner-blue-only">
<div class = "circle-clipper left">
<div class = "circle"></div>
</div>
<div class = "gap-patch">
<div class = "circle"></div>
</div>
<div class = "circle-clipper right">
<div class = "circle"></div>
</div>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 다양한 유형의 아코디언을 표시하기 위해 미리 정의 된 다양한 시각적 및 동작 향상을 적용하는 다양한 CSS 클래스를 제공합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | collapsible 요소를 구체화 축소 가능 구성 요소로 식별합니다. ul 요소에 필요합니다. |
| 2 | collapsible-header div를 섹션 헤더로 설정합니다. |
| 삼 | collapsible-body div를 섹션 콘텐츠 컨테이너로 설정합니다. |
| 4 | popout 접을 수있는 팝 아웃을 만듭니다. |
| 5 | active 섹션을 엽니 다. |
| 6 | expandable 접을 수있는 구성 요소를 확장 가능으로 표시합니다. |
| 7 | accordion 접을 수있는 구성 요소를 아코디언으로 표시합니다. |
다음은 다른 방법으로 아코디언을 사용하는 예입니다.
예
materialize_collapsible.htm
<html>
<head>
<title>The Materialize Collapsible Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h4>Simple Accordion</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Popout Accordion</h4>
<ul class = "collapsible popout" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Accordion with Preselected Section</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header active">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Expandables</h4>
<ul class = "collapsible" data-collapsible = "expandable">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 사용자에게 눈에 띄지 않는 경고를 표시하는 다양한 특수 방법을 제공합니다. Materialise는 그들에게 토스트라는 용어를 제공합니다. 다음은 대화 상자를 토스트로 표시하는 구문입니다.
Materialize.toast(message, displayLength, className, completeCallback);어디,
message − 사용자에게 표시 할 메시지.
displayLength − 메시지가 사라지는 기간.
className− 토스트에 적용 할 스타일 클래스. 예 : '반올림'.
completeCallback − 토스트가 해제되면 호출 할 콜백 메서드.
툴팁을 위해 Materialise는 다음 CSS 클래스를 제공합니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | tooltipped 도구 설명이있는 구성 요소를 식별합니다. |
| 2 | data-position 툴팁의 위치. 하단, 상단, 왼쪽 또는 오른쪽. |
| 삼 | data-delay 툴팁이 사라질 때까지의 기간을 설정합니다. |
| 4 | data-tooltip 툴팁 내용을 설정합니다. |
예
다음 예제는 알림 및 도구 설명의 사용을 보여줍니다.
materialize_dialogs.htm
<html>
<head>
<title>The Materialize Dialogs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
function showToast(message, duration) {
Materialize.toast(message, duration);
}
function showToast1(message, duration) {
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration) {
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration) {
Materialize.toast('Hello World!', duration, '', function toastCompleted() {
alert('Toast dismissed!');
});
}
</script>
</head>
<body class = "container">
<h4>Toasts</h4>
<a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
<a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>
<h4>Tooltips</h4>
<a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
data-tooltip = "I am in bottom!">Bottom</a>
<a class = "btn tooltipped" data-position = "left" data-delay = "50"
data-tooltip = "I am in left!">Left</a>
<a class = "btn tooltipped" data-position = "right" data-delay = "50"
data-tooltip = "I am in right!">Right</a>
<a class = "btn tooltipped" data-position = "top" data-delay = "50"
data-tooltip = "I am in top!">Top</a>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 드롭 다운 CSS 클래스를 제공하여 ul 요소를 드롭 다운으로 만들고 ul 요소의 id를 버튼 또는 앵커 요소의 data-activates 속성에 추가합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | dropdown-content ul을 구체화 드롭 다운 구성 요소로 식별합니다. ul 요소에 필요합니다. |
| 2 | data-activates 드롭 다운 ul 요소의 ID입니다. |
예
다음은 드롭 다운 사용의 예입니다.
materialize_dropdowns.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Dropdowns Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Drop Down Demo</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li class = "divider"></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 탭 CSS 클래스를 제공하여 ul탭으로 요소. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | tabs ul을 구체화 탭 구성 요소로 식별합니다. ul 요소에 필요합니다. |
| 2 | active 탭을 활성화합니다. |
예
다음은 탭 사용의 예입니다.
materialize_tabs.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Tabs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Tabs Demo</h3>
<div class = "row">
<div class = "col s12">
<ul class = "tabs">
<li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
<li class = "tab col s3"><a class = "active" href = "#unread">
Unread</a></li>
<li class = "tab col s3 disabled"><a href = "#outbox">
Outbox (Disabled)</a></li>
<li class = "tab col s3"><a href = "#sent">Sent</a></li>
</ul>
</div>
<div id = "inbox" class = "col s12">Inbox</div>
<div id = "unread" class = "col s12">Unread</div>
<div id = "outbox" class = "col s12">Outbox (Disabled)</div>
<div id = "sent" class = "col s12">Sent</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Materialise는 외부 라이브러리 인 Waves를 사용하여 Material Design에 설명 된 잉크 효과를 만듭니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나와 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | waves-effect 컨트롤에 물결 효과를 적용합니다. |
| 2 | waves-light 흰색 물결 효과를 적용합니다. |
| 삼 | waves-red 빨간색 물결 효과를 적용합니다. |
| 4 | waves-green 녹색 물결 효과를 적용합니다. |
| 5 | waves-yellow 노란색 물결 효과를 적용합니다. |
| 6 | waves-orange 주황색 물결 효과를 적용합니다. |
| 7 | waves-purple 자주색 물결 효과를 적용합니다. |
| 8 | waves-teal 청록색 물결 효과를 적용합니다. |
예
다음은 버튼에 웨이브 효과를 사용하는 예입니다.
materialize_waves.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Waves Effects Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Waves Effects Demo</h3>
<div class = "collection waves-color-demo">
<div class = "collection-item">
<code class = " language-markup">Default</code>
<a href = "#!" class = "waves-effect btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-light</code>
<a href = "#!" class = "waves-effect waves-light btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-red</code>
<a href = "#!" class = "waves-effect waves-red btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-yellow</code>
<a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-orange</code>
<a href = "#!" class = "waves-effect waves-orange btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-purple</code>
<a href = "#!" class = "waves-effect waves-purple btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-green</code>
<a href = "#!" class = "waves-effect waves-green btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-teal</code>
<a href = "#!" class = "waves-effect waves-teal btn secondary-content">
Click Me!</a>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.