Materialize - Hướng dẫn nhanh
Materialize là một thư viện thành phần giao diện người dùng được tạo bằng CSS, JavaScript và HTML. Vật chất hóa các thành phần giao diện người dùng có thể tái sử dụng giúp xây dựng các trang web và ứng dụng web hấp dẫn, nhất quán và chức năng trong khi tuân thủ các nguyên tắc thiết kế web hiện đại như tính di động của trình duyệt, tính độc lập của thiết bị và sự xuống cấp duyên dáng.
Một số tính năng nổi bật của nó như sau:
Thiết kế đáp ứng tích hợp sẵn.
CSS chuẩn với dấu chân tối thiểu.
Phiên bản mới của các điều khiển giao diện người dùng thông thường như nút, hộp kiểm và trường văn bản được điều chỉnh để tuân theo các khái niệm Material Design.
Các tính năng nâng cao và chuyên biệt như thẻ, tab, thanh điều hướng, nâng ly, v.v.
Miễn phí để sử dụng và yêu cầu thư viện JavaScript jQuery hoạt động bình thường.
Trình duyệt chéo và có thể được sử dụng để tạo các thành phần web có thể sử dụng lại.
Thiết kế đáp ứng
Materialize có thiết kế đáp ứng được tích hợp sẵn để trang web được tạo bằng Materialize sẽ tự thiết kế lại theo kích thước thiết bị. Các lớp Materialize được tạo theo cách mà trang web có thể phù hợp với bất kỳ kích thước màn hình nào.
Các trang web được tạo bằng Materialize hoàn toàn tương thích với PC, máy tính bảng và thiết bị di động.
Có thể mở rộng
Materialize được thiết kế rất tối thiểu và phẳng. Nó được thiết kế dựa trên thực tế là việc thêm các quy tắc CSS mới dễ dàng hơn nhiều so với việc ghi đè các quy tắc CSS hiện có. Nó hỗ trợ bóng đổ và màu đậm. Màu sắc và sắc thái vẫn đồng nhất trên các nền tảng và thiết bị khác nhau.
Và quan trọng nhất, nó hoàn toàn miễn phí để sử dụng.
Trong chương này, chúng ta sẽ thảo luận về các khía cạnh khác nhau của việc thiết lập một môi trường đồng nhất cho Vật chất hóa.
Dùng thử Tùy chọn trực tuyến
Chúng tôi đã thiết lập môi trường Lập trình Materialize trực tuyến để bạn có thể biên dịch và thực thi tất cả các ví dụ có sẵn trực tuyến. Nó mang lại cho bạn niềm tin vào những gì bạn đang đọc và cho phép bạn xác minh các chương trình bằng các tùy chọn khác nhau. Vui lòng sửa đổi bất kỳ ví dụ nào và thực hiện trực tuyến.
Hãy thử ví dụ sau bằng trình biên dịch trực tuyến của chúng tôi có sẵn tại 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>Đối với hầu hết các ví dụ được đưa ra trong hướng dẫn này, bạn sẽ tìm thấy tùy chọn Dùng thử trong phần mã trang web của chúng tôi ở góc trên cùng bên phải sẽ đưa bạn đến trình biên dịch trực tuyến. Vì vậy, chỉ cần tận dụng nó và tận hưởng việc học của bạn.
Làm thế nào để sử dụng Materialize?
Có hai cách để sử dụng Materialize -
Local Installation - Bạn có thể tải xuống materialize.min.css và materialize.min.js trên máy cục bộ của bạn và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể bao gồm materialize.min.css và materialize.min.js tệp vào mã HTML của bạn trực tiếp từ Mạng phân phối nội dung (CDN).
Cài đặt cục bộ
Đi đến http://materializecss.com/getting-started.html để tải xuống phiên bản mới nhất có sẵn.
Sau đó, đặt tải xuống materialize.min.js tệp trong thư mục của trang web của bạn, ví dụ: / js và materialize.min.css trong / css.
Thí dụ
Bao gồm cái css và js tệp trong tệp HTML của bạn như sau.
<!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>Nó sẽ tạo ra kết quả sau.
Phiên bản dựa trên CDN
Bạn có thể bao gồm materialize.min.js và materialize.min.css tệp vào mã HTML của bạn trực tiếp từ Mạng phân phối nội dung (CDN). cdnjs.cloudflare.com cung cấp nội dung cho phiên bản mới nhất.
Chúng tôi đang sử dụng cdnjs.cloudflare.com phiên bản CDN của thư viện trong suốt hướng dẫn này.
Thí dụ
Viết lại ví dụ trên bằng cách sử dụng materialize.min.css và materialize.min.js từ 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>Nó sẽ tạo ra kết quả sau:
Materialize hỗ trợ một tập hợp các lớp màu phong phú. Các lớp màu này được lấy cảm hứng và phát triển dựa trên các màu được sử dụng trong tiếp thị, biển báo và ghi chú.
- 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
Sử dụng
Sau đây là danh sách các lớp sáng / tối, có thể được sử dụng để thay đổi màu được áp dụng.
- 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
Thí dụ
Ví dụ sau minh họa cách sử dụng các lớp trên để hiển thị nền hoặc thay đổi màu của văn bản. Trong trường hợp nền, hãy thêm các lớp như vậy và trong trường hợp văn bản, hậu tố '-text' vào lớp màu và tiền tố 'văn bản-' vào lớp sét.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp một lưới đáp ứng chất lỏng 12 cột.
Nó sử dụng các lớp kiểu hàng và cột để xác định các hàng và cột tương ứng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | row Chỉ định một vùng chứa không có phần đệm sẽ được sử dụng cho các cột đáp ứng. Lớp này là bắt buộc để các lớp đáp ứng có thể đáp ứng hoàn toàn. |
| 2 | col Chỉ định một cột với các lớp con. |
col có một số lớp con dành cho các loại màn hình khác nhau.
Các cột dành cho thiết bị màn hình nhỏ
Sau đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình nhỏ, điển hình là điện thoại thông minh.
| Sr.No. | Tên & Mô tả Lớp học | |
|---|---|---|
| 1 | s1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
|
| 2 | s2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
|
| 3 | s3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
|
| 4 | s4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
|
| s5 - s11 | ||
| 12 | s12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình nhỏ. |
|
Cột cho Thiết bị Màn hình Trung bình
Sau đây là danh sách các kiểu cấp cột cho các thiết bị màn hình trung bình, điển hình là máy tính bảng.
| Sr.No. | Tên & Mô tả Lớp học | |
|---|---|---|
| 1 | m1 Xác định 1 trong 12 cột có chiều rộng là 08,33% |
|
| 2 | m2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
|
| 3 | m3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
|
| 4 | m4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
|
| m5 - m11 | ||
| 12 | m12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình trung bình. |
|
Cột dành cho thiết bị màn hình lớn
Sau đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình lớn, điển hình là máy tính xách tay.
| Sr.No. | Tên & Mô tả Lớp học | |
|---|---|---|
| 1 | l1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
|
| 2 | l2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
|
| 3 | l3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
|
| 4 | l4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
|
| l5 - l11 | ||
| 12 | l12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho thiết bị màn hình lớn. |
|
Sử dụng
Mỗi lớp con xác định số cột của lưới sẽ được sử dụng dựa trên loại thiết bị. Hãy xem xét đoạn mã HTML sau.
<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>Các cột mặc định sẽ được sử dụng là 12 trên một thiết bị, nếu một lớp con không được đề cập trong thuộc tính lớp của một phần tử HTML.
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize có một số lớp tiện ích hữu ích cho nhu cầu thiết kế hàng ngày.
Color utility classes - Ví dụ: .red, .green, .grey, v.v.
Alignment utility classes - Ví dụ: .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
Hiding Content utility classes as per device size - Ví dụ: .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up và .hide-on- chỉ lớn
Formatting utility classes - Ví dụ: cắt ngắn, có thể di chuyển
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize có một số lớp để làm cho hình ảnh và video đáp ứng với các kích thước khác nhau.
responsive-img - Nó tạo ra một hình ảnh để tự thay đổi kích thước dựa trên kích thước màn hình.
video-container - Đối với vùng chứa đáp ứng có video nhúng.
responsive-video - Làm cho video HTML5 đáp ứng.
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize có một số lớp đặc biệt để hiển thị các hộp đựng dưới dạng thẻ giống như giấy có bóng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | z-depth-0 Loại bỏ bóng của các phần tử có độ sâu z theo mặc định. |
| 2 | z-depth-1 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 1px. Thêm độ sâu z của 1. |
| 3 | z-depth-2 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có đường viền 2px. Thêm độ sâu z của 2. |
| 4 | z-depth-3 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 3px. Thêm độ sâu z của 3. |
| 5 | z-depth-4 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 4px. Thêm độ sâu z của 4. |
| 6 | z-depth-5 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 5px. Thêm độ sâu z của 5. |
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize có thể được sử dụng để hiển thị các loại bảng khác nhau bằng cách sử dụng các kiểu khác nhau trên bảng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | None Đại diện cho một bảng cơ bản không có bất kỳ đường viền nào. |
| 2 | stripped Hiển thị một bảng đã loại bỏ. |
| 3 | bordered Vẽ một bảng có đường viền giữa các hàng. |
| 4 | highlight Vẽ một bảng được đánh dấu. |
| 5 | centered Vẽ một bảng với tất cả văn bản được căn giữa trong bảng. |
| 6 | responsive-table Vẽ một bảng đáp ứng để hiển thị thanh cuộn ngang, nếu màn hình quá nhỏ để hiển thị nội dung. |
Thí dụ
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>Kết quả
Xác minh kết quả.
Vật chất hóa việc sử dụng Roboto 2.0như một phông chữ tiêu chuẩn. Nó có thể được ghi đè bằng cách sử dụng kiểu CSS sau.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}Sau đây là các ví dụ về tiêu đề, trích dẫn khối và văn bản tự do nhưng đáp ứng.
Thí dụ
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>Kết quả
Xác minh kết quả.
Thành phần huy hiệu Materialize là một thông báo trên màn hình, có thể là một số hoặc một biểu tượng. Nó thường được sử dụng để nhấn mạnh số lượng các mục.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | badge Xác định một phần tử làm thành phần huy hiệu MDL. Bắt buộc đối với phần tử span. |
| 2 | new Thêm một lớp "mới" vào thành phần huy hiệu để tạo nền cho nó. |
Sau đây là các ví dụ về việc sử dụng huy hiệu theo những cách khác nhau.
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp CSS khác nhau để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước cho các nút. Bảng sau đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | btn Đặt nút hoặc neo làm nút Materialize, bắt buộc. Đặt hiệu ứng hiển thị nâng lên thành một nút. |
| 2 | btn-floating Tạo một nút tròn. |
| 3 | btn-flat Đặt hiệu ứng màn hình phẳng thành một nút, mặc định. |
| 4 | btn-large Tạo các nút lớn. |
| 5 | disabled Tạo một nút tắt. |
| 6 | type = "submit" Biểu thị một mỏ neo hoặc nút như một nút chính. |
| 7 | waves-effect Đặt hiệu ứng nhấp chuột gợn sóng, có thể được sử dụng kết hợp với bất kỳ lớp nào khác. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp nút mdl để hiển thị các loại nút khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp nhiều lớp CSS khác nhau để tạo một breadcrumb đẹp một cách dễ dàng. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | nav-wrapper Đặt thành phần điều hướng làm trình bao bọc thanh breadcrumb / nav. |
| 2 | breadcrumb Đặt phần tử neo làm breadcrumb. Phần tử neo cuối cùng đang hoạt động, trong khi phần còn lại được hiển thị dưới dạng màu xám. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp breadcrumb để giới thiệu thanh điều hướng.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp CSS khác nhau để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước để hiển thị các loại thẻ khác nhau. Bảng sau đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | card Xác định phần tử div như một vùng chứa thẻ Materialize. Bắt buộc trên div "bên ngoài". |
| 2 | card-content Xác định div là vùng chứa nội dung thẻ và được yêu cầu trên div "bên trong". |
| 3 | card-title Xác định div là vùng chứa tiêu đề thẻ và được yêu cầu trên div tiêu đề "bên trong". |
| 4 | card-action Xác định div như một vùng chứa hành động thẻ và chỉ định các đặc điểm văn bản thích hợp cho văn bản hành động. Bắt buộc đối với hành động "bên trong" div; nội dung đi trực tiếp bên trong div mà không có vùng chứa can thiệp. |
| 5 | card-image Xác định div là vùng chứa hình ảnh thẻ và được yêu cầu trên div "bên trong". |
| 6 | card-reveal Xác định div là một vùng chứa văn bản được tiết lộ. |
| 7 | activator Xác định div là vùng chứa văn bản được tiết lộ và hình ảnh sẽ được hiển thị. Được sử dụng để hiển thị thông tin ngữ cảnh liên quan đến hình ảnh. |
| số 8 | card-panel Xác định div là một thẻ đơn giản có bóng và phần đệm. |
| 9 | card-small Xác định div là một thẻ có kích thước nhỏ. Chiều cao: 300px; |
| 10 | card-medium Xác định div là một thẻ có kích thước trung bình. Chiều cao: 400px; |
| 11 | card-large Xác định div là một thẻ có kích thước lớn. Chiều cao: 500px; |
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng các lớp thẻ để giới thiệu các loại thẻ khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp một thành phần đặc biệt được gọi là Chip, có thể được sử dụng để biểu diễn một tập hợp thông tin nhỏ. Ví dụ: một số liên lạc, các thẻ, v.v.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | chip Đặt vùng chứa div làm chip. |
Thí dụ
Ví dụ sau minh họa việc sử dụng lớp chip để giới thiệu việc tạo nhiều loại thẻ khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp đặc biệt để đại diện cho nhiều loại tập hợp khác nhau, trong đó tập hợp đại diện cho một nhóm các mục thông tin liên quan.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | collection Đặt vùng chứa div hoặc ul làm bộ sưu tập. |
| 2 | collection-item Đặt mục a hoặc li làm mục bộ sưu tập. |
| 3 | active Hiển thị mục a hoặc li dưới dạng mục bộ sưu tập đang hoạt động. |
| 4 | with-header Đánh dấu bộ sưu tập để có tiêu đề. |
| 5 | collection-header Đặt mục a hoặc li làm tiêu đề bộ sưu tập. |
| 6 | avatar Đặt mục a hoặc li làm mục hình đại diện. |
| 7 | dismissible Cho phép xóa các mục trong bộ sưu tập. Chỉ hoạt động trên các thiết bị màn hình cảm ứng. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp bộ sưu tập để giới thiệu việc tạo nhiều loại bộ sưu tập khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp đặc biệt để đại diện cho các loại tập hợp khác nhau trong đó tập hợp đại diện cho một nhóm các mục thông tin liên quan.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | page-footer Đặt vùng chứa div làm chân trang. |
| 2 | footer-copyright Đặt vùng chứa div làm vùng chứa footer-bản quyền. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp footer để giới thiệu một footer mẫu.
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>Kết quả
Xác minh kết quả.
Materialize có một CSS rất đẹp và đáp ứng để thiết kế biểu mẫu. CSS sau được sử dụng:
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | input-field Đặt vùng chứa div làm vùng chứa trường đầu vào. Cần thiết. |
| 2 | validate Thêm kiểu xác thực vào trường đầu vào. |
| 3 | active Hiển thị đầu vào với kiểu hiện hoạt. |
| 4 | materialize-textarea Được sử dụng để tạo kiểu cho một vùng văn bản. Các vùng văn bản sẽ tự động thay đổi kích thước thành văn bản bên trong. |
| 5 | filled-in Hiển thị một hộp kiểm với kiểu hộp đầy. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp đầu vào để giới thiệu một biểu mẫu mẫu.
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>Kết quả
Xác minh kết quả.
Kiểm soát đầu vào quan trọng
Materialize cung cấp CSS cho nhiều loại điều khiển đầu vào. Bảng sau chi tiết như nhau.
| Sr.No. | Kiểu nhập Tên & Mô tả |
|---|---|
| 1 | Lựa chọn Nhiều loại đầu vào được lựa chọn |
| 2 | Công tắc Các loại công tắc |
| 3 | Tập tin Các loại đầu vào tệp khác nhau |
| 4 | Phạm vi Nhiều loại đầu vào phạm vi khác nhau |
| 5 | Bảng chọn ngày Bảng chọn ngày |
| 6 | Bộ đếm ký tự Bộ đếm ký tự |
Materialize hỗ trợ các thư viện biểu tượng phổ biến sau:
- Biểu tượng phông chữ tuyệt vời
- Biểu tượng tài liệu của Google
- Biểu tượng Bootstrap
Sử dụng
Để sử dụng một biểu tượng, hãy đặt tên của biểu tượng trong lớp của một phần tử <i> HTML. Để kiểm soát kích thước của một biểu tượng, bạn có thể sử dụng các lớp sau:
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | tiny Vẽ một biểu tượng có kích thước rất nhỏ. 1 hậu cung. |
| 2 | small Vẽ một biểu tượng có kích thước nhỏ. 2 hậu cung. |
| 3 | medium Vẽ một biểu tượng có kích thước trung bình. 4 hậu cung. |
| 4 | large Vẽ một biểu tượng có kích thước lớn. 6 hậu cung. |
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp CSS khác nhau để tạo một thanh điều hướng đẹp một cách dễ dàng. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | nav-wrapper Đặt thành phần điều hướng dưới dạng trình bao bọc thanh điều hướng / breadcrumb. |
| 2 | brand-logo Đặt phần tử neo làm biểu trưng chính. |
| 3 | nav-mobile Đặt phần tử ul làm thanh điều hướng. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp điều hướng để giới thiệu các thanh điều hướng khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp nhiều lớp CSS khác nhau để tạo một thanh phân trang đẹp một cách dễ dàng. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pagination Đặt phần tử ul làm thành phần phân trang. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp điều hướng để hiển thị thanh phân trang.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp CSS khác nhau để áp dụng các cải tiến về hành vi và hình ảnh được xác định trước khác nhau để hiển thị các loại trình tải trước hoặc thanh tiến trình khác nhau. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | progress Xác định một phần tử như một thành phần tiến trình. Bắt buộc đối với phần tử div. |
| 2 | determinate Đặt hành vi Materialize cơ bản thành chỉ báo tiến trình. |
| 3 | indeterminate Đặt hoạt ảnh thành chỉ báo tiến trình. |
Thí dụ
Sau đây là một ví dụ về việc sử dụng bộ tải trước theo những cách khác nhau.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp các lớp CSS khác nhau để áp dụng các cải tiến về hành vi và hình ảnh được xác định trước khác nhau để hiển thị các loại đàn accordion khác nhau. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | collapsible Xác định một phần tử là một thành phần có thể thu gọn cụ thể hóa. Bắt buộc đối với phần tử ul. |
| 2 | collapsible-header Đặt div làm tiêu đề phần. |
| 3 | collapsible-body Đặt div làm vùng chứa nội dung phần. |
| 4 | popout Tạo một cửa sổ bật lên có thể thu gọn. |
| 5 | active Mở một phần. |
| 6 | expandable Đánh dấu một thành phần có thể thu gọn là có thể mở rộng. |
| 7 | accordion Đánh dấu một thành phần có thể thu gọn là đàn accordion. |
Sau đây là một ví dụ về việc sử dụng đàn accordion theo những cách khác nhau.
Thí dụ
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>Kết quả
Xác minh kết quả.
Materialize cung cấp nhiều phương pháp đặc biệt khác nhau để hiển thị các cảnh báo không phô trương cho người dùng. Materialize cung cấp một thuật ngữ nâng ly cho họ. Sau đây là cú pháp để hiển thị hộp thoại dưới dạng bánh mì nướng.
Materialize.toast(message, displayLength, className, completeCallback);Ở đâu,
message - Thông báo sẽ được hiển thị cho người dùng.
displayLength - Thời lượng của tin nhắn sau đó nó sẽ biến mất.
className- Lớp phong cách được áp dụng cho bánh mì nướng. Ví dụ: 'làm tròn'.
completeCallback - Phương thức gọi lại được gọi sau khi loại bỏ bánh mì nướng.
Đối với chú giải công cụ, Materialize cung cấp các lớp CSS sau.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | tooltipped Xác định một thành phần để có một chú giải công cụ. |
| 2 | data-position Vị trí của chú giải công cụ; dưới cùng, trên cùng, trái hoặc phải. |
| 3 | data-delay Đặt thời lượng của chú giải công cụ mà sau đó nó sẽ biến mất. |
| 4 | data-tooltip Đặt nội dung chú giải công cụ. |
Thí dụ
Ví dụ sau minh họa việc sử dụng bánh mì nướng và chú giải công cụ.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp lớp CSS thả xuống để tạo phần tử ul làm danh sách thả xuống và thêm id của phần tử ul vào thuộc tính kích hoạt dữ liệu của nút hoặc phần tử neo. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | dropdown-content Xác định ul như một thành phần thả xuống cụ thể hóa. Bắt buộc đối với phần tử ul. |
| 2 | data-activates id của phần tử ul thả xuống. |
Thí dụ
Sau đây là một ví dụ về việc sử dụng trình đơn thả xuống.
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>Kết quả
Xác minh kết quả.
Materialize cung cấp lớp CSS tab để tạo ulphần tử dưới dạng tab. Bảng sau đây đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | tabs Xác định ul như một thành phần tab hiện thực hóa. Bắt buộc đối với phần tử ul. |
| 2 | active Làm cho một tab hoạt động. |
Thí dụ
Sau đây là một ví dụ về việc sử dụng một tab.
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>Kết quả
Xác minh kết quả.
Materialize sử dụng Waves, một thư viện bên ngoài, để tạo hiệu ứng mực được nêu trong Material Design. Bảng sau đề cập đến các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | waves-effect Áp dụng hiệu ứng sóng trên điều khiển. |
| 2 | waves-light Áp dụng hiệu ứng sóng màu trắng. |
| 3 | waves-red Áp dụng hiệu ứng sóng màu đỏ. |
| 4 | waves-green Áp dụng hiệu ứng sóng màu xanh lá cây. |
| 5 | waves-yellow Áp dụng hiệu ứng sóng màu vàng. |
| 6 | waves-orange Áp dụng hiệu ứng sóng màu cam. |
| 7 | waves-purple Áp dụng hiệu ứng sóng màu tím. |
| số 8 | waves-teal Áp dụng hiệu ứng sóng màu xanh mòng két. |
Thí dụ
Sau đây là một ví dụ về việc sử dụng hiệu ứng sóng trên các nút.
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>Kết quả
Xác minh kết quả.