Material Design Lite - Hướng dẫn nhanh
Material Design Lite là gì?
Material Design Lite (MDL là thư viện thành phần giao diện người dùng được tạo bằng CSS, JavaScript và HTML. Các thành phần giao diện người dùng MDL giúp xây dựng các trang web và ứng dụng web hấp dẫn, nhất quán và có 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.
Sau đây là các tính năng nổi bật của Material Design Lite -
Thiết kế đáp ứng tích hợp sẵn.
CSS chuẩn với dấu chân tối thiểu.
Bao gồm các 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ư các 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.
Bao gồm các tính năng nâng cao và chuyên biệt như thẻ, bố cục cột, thanh trượt, con quay, tab, kiểu chữ, v.v.
Có thể được sử dụng có hoặc không có bất kỳ thư viện hoặc môi trường phát triển nào.
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
Material Design Lite có thiết kế đáp ứng được tích hợp sẵn để trang web được tạo bằng Material Design Lite sẽ tự thiết kế lại theo kích thước thiết bị.
Các lớp Material Design Lite đượ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 Material Design Lite hoàn toàn tương thích với PC, máy tính bảng và thiết bị di động.
CSS chuẩn
Material Design Lite chỉ sử dụng CSS chuẩn và nó rất dễ học.
Không có sự phụ thuộc vào bất kỳ thư viện JavaScript bên ngoài nào như jQuery.
ExtensibleMaterial Design Lite được thiết kế rất tối giản 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, MDL hoàn toàn miễn phí để sử dụng.
Có hai cách để sử dụng Material Design Lite -
Local Installation - Bạn có thể tải tài liệu xuống các tệp. {Primary} - {voice} .min.css và material.min.js trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể bao gồm các tệp material. {Primary} - {voice} .min.css và material.min.js vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).
Cài đặt cục bộ
Làm theo các bước sau để cài đặt MDL -
Đi đến https://www.getmdl.io/started/index.html để tải xuống phiên bản mới nhất có sẵn.
Sau đó, đặt tải xuống material.min.js tệp trong thư mục của trang web của bạn, ví dụ: / js và material.min.css trong / css.
Thí dụ
Bây giờ bạn có thể đưa tệp css và js vào tệp HTML của mình như sau:
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Chương trình trên sẽ tạo ra kết quả sau:
Phiên bản dựa trên CDN
Bạn có thể đưa các tệp js và css vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). storage.googleapis.com cung cấp nội dung cho phiên bản mới nhất.
Chúng tôi đang sử dụng phiên bản CDN của thư viện storage.googleapis.com trong suốt hướng dẫn này.
Thí dụ
Bây giờ, chúng ta hãy viết lại ví dụ trên bằng material.css và material.js từ Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Chương trình trên sẽ tạo ra kết quả sau:
Trong chương này, chúng ta sẽ thảo luận về các bố cục khác nhau trong Material Design Lite. HTML5 có các phần tử vùng chứa sau:
<div> - Cung cấp một vùng chứa chung cho nội dung HTML.
<header> - Đại diện cho phần tiêu đề.
<footer> - Đại diện cho phần chân trang.
<article> - Đại diện cho các bài báo.
<section> - Cung cấp một vùng chứa chung cho các loại phần khác nhau.
MDL 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 được xác định trước khác nhau cho các vùng chứa. Bảng sau liệt kê 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 | mdl-layout Xác định một vùng chứa là một thành phần MDL. Bắt buộc đối với phần tử vùng chứa bên ngoài. |
| 2 | mdl-js-layout Thêm hành vi MDL cơ bản vào bố cục. Bắt buộc đối với phần tử vùng chứa bên ngoài. |
| 3 | mdl-layout__header Xác định vùng chứa như một thành phần MDL. Bắt buộc trên phần tử tiêu đề. |
| 4 | mdl-layout-icon Dùng để thêm biểu tượng ứng dụng. Được ghi đè bởi biểu tượng menu nếu cả hai đều hiển thị. Yếu tố biểu tượng tùy chọn. |
| 5 | mdl-layout__header-row Xác định vùng chứa dưới dạng hàng tiêu đề MDL. Bắt buộc trên vùng chứa nội dung tiêu đề. |
| 6 | mdl-layout__title Xác định văn bản tiêu đề bố cục. Bắt buộc trên vùng chứa tiêu đề bố cục. |
| 7 | mdl-layout-spacer Được sử dụng để căn chỉnh các phần tử bên trong tiêu đề hoặc ngăn kéo. Nó phát triển để lấp đầy không gian còn lại. Thường được sử dụng để căn chỉnh các phần tử bên phải. Tùy chọn trên div sau tiêu đề bố cục. |
| số 8 | mdl-navigation Xác định vùng chứa là nhóm điều hướng MDL. Bắt buộc trên phần tử điều hướng. |
| 9 | mdl-navigation__link Xác định neo là liên kết điều hướng MDL. Bắt buộc đối với phần tử neo đầu trang và / hoặc ngăn kéo. |
| 10 | mdl-layout__drawer Xác định vùng chứa dưới dạng ngăn bố trí MDL. Bắt buộc đối với phần tử vùng chứa ngăn kéo. |
| 11 | mdl-layout__content Xác định vùng chứa dưới dạng nội dung bố cục MDL. Bắt buộc trên phần tử chính. |
| 12 | mdl-layout__header--scroll Làm cho tiêu đề cuộn với nội dung. Tùy chọn trên phần tử tiêu đề. |
| 13 | mdl-layout--fixed-drawer Làm cho ngăn kéo luôn hiển thị và mở trong màn hình lớn hơn. Tùy chọn trên phần tử vùng chứa bên ngoài chứ không phải trên phần tử vùng chứa ngăn kéo. |
| 14 | mdl-layout--fixed-header Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ. Tùy chọn đối với phần tử vùng chứa bên ngoài. |
| 15 | mdl-layout--large-screen-only Ẩn một phần tử trên màn hình nhỏ hơn. Tùy chọn trên bất kỳ hậu duệ nào của mdl-layout. |
| 16 | mdl-layout--small-screen-only Ẩn một phần tử trên màn hình lớn hơn. Tùy chọn trên bất kỳ hậu duệ nào của mdl-layout. |
| 17 | mdl-layout__header--waterfall Cho phép tạo hiệu ứng "thác nước" với nhiều dòng tiêu đề. Tùy chọn trên phần tử tiêu đề. |
| 18 | mdl-layout__header--transparent Làm cho tiêu đề trong suốt và vẽ trên nền bố cục. Tùy chọn trên phần tử tiêu đề. |
| 19 | mdl-layout__header--seamed Sử dụng tiêu đề không có bóng. Tùy chọn trên phần tử tiêu đề. |
| 20 | mdl-layout__tab-bar Xác định vùng chứa dưới dạng thanh tab MDL. Bắt buộc đối với phần tử vùng chứa bên trong tiêu đề (bố cục theo thẻ). |
| 21 | mdl-layout__tab Xác định neo dưới dạng liên kết tab MDL. Bắt buộc trên các phần tử neo của thanh tab. |
| 22 | is-active Xác định tab là tab hoạt động mặc định. Tùy chọn trên phần tử liên kết thanh tab và phần tử phần tab được liên kết. |
| 23 | mdl-layout__tab-panel Xác định vùng chứa dưới dạng bảng nội dung tab. Bắt buộc trên các phần tử phần tab. |
| 24 | mdl-layout--fixed-tabs Sử dụng các tab cố định thay vì các tab có thể cuộn mặc định. Tùy chọn đối với phần tử vùng chứa bên ngoài, không phải tiêu đề vùng chứa bên trong. |
Các ví dụ sau đây cho thấy việc sử dụng lớp mdl-layout để tạo kiểu cho các vùng chứa khác nhau.
Ngăn kéo cố định
Để tạo một mẫu có ngăn kéo cố định nhưng không có tiêu đề, các lớp MDL sau được sử dụng.
mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-drawer - Làm cho ngăn kéo luôn hiển thị và mở trong màn hình lớn hơn.
mdl-layout__drawer - Xác định div là ngăn bố trí MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-navigation - Xác định div là nhóm điều hướng MDL.
mdl-navigation__link - Xác định anchor là liên kết điều hướng MDL.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề cố định
Để tạo một mẫu với tiêu đề cố định sau lớp MDL bổ sung được sử dụng.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề và ngăn kéo cố định
Để tạo một mẫu với tiêu đề cố định và ngăn cố định, các lớp MDL bổ sung sau được sử dụng.
mdl-layout--fixed-drawer - Làm cho ngăn kéo luôn hiển thị và mở trong màn hình lớn hơn.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề cuộn
Để tạo một mẫu có tiêu đề cuộn, các lớp MDL sau được sử dụng.
mdl-layout--header--scroll - Làm cho tiêu đề cuộn với nội dung.
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề Hợp đồng
Để tạo một mẫu có tiêu đề hợp đồng khi trang cuộn xuống, lớp MDL sau được sử dụng.
mdl-layout__header--waterfall - Cho phép tạo hiệu ứng "thác nước" với nhiều dòng tiêu đề.
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề cố định với các tab có thể cuộn
Để tạo một mẫu có tiêu đề có các tab có thể cuộn, các lớp MDL sau được sử dụng.
mdl-layout__tab-bar - Xác định vùng chứa dưới dạng thanh tab MDL.
mdl-layout__tab - Xác định anchor là một liên kết tab MDL.
mdl-layout__tab-panel - Xác định vùng chứa dưới dạng bảng nội dung tab.
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Tiêu đề cố định với các tab cố định
Để tạo một mẫu có tiêu đề có các tab cố định, lớp MDL bổ sung sau được sử dụng.
mdl-layout--fixed-tabs - Sử dụng các tab cố định thay vì các tab có thể cuộn mặc định.
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Lưới Material Design Lite (MDL) là một thành phần để sắp xếp nội dung cho các kích thước màn hình khác nhau. Lưới MDL được xác định và bao quanh bởi một phần tử container / div. Một lưới có 12 cột trong màn hình kích thước máy tính để bàn, 8 trong màn hình kích thước máy tính bảng và 4 trong màn hình kích thước điện thoại, trong đó mỗi kích thước đều có lề và rãnh được xác định trước. Các ô được sắp xếp theo cách tuần tự trong một hàng, theo thứ tự chúng được xác định, với các ngoại lệ sau:
Nếu một ô lưới không vừa với hàng ở một trong các kích thước màn hình, ô đó sẽ chảy vào dòng sau.
Nếu một ô lưới có kích thước cột được chỉ định bằng hoặc lớn hơn số cột cho kích thước màn hình, ô đó sẽ chiếm toàn bộ hàng.
MDL cung cấp các lớp CSS khác nhau để áp dụng nhiều cải tiến về hành vi và hình ảnh được xác định trước cho lưới. Bảng sau liệt kê 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 | mdl-layout Xác định một vùng chứa là một thành phần MDL. Bắt buộc đối với phần tử vùng chứa bên ngoài. |
| 2 | mdl-grid Xác định vùng chứa dưới dạng thành phần lưới MDL. Bắt buộc trên phần tử div "bên ngoài". |
| 3 | mdl-cell Xác định một vùng chứa là một ô MDL. Bắt buộc đối với các phần tử div "bên trong". |
| 4 | mdl-grid--no-spacing Cập nhật các ô lưới để không có lề giữa chúng. Tùy chọn cho vùng chứa lưới. |
| 5 | mdl-cell--N-col Điều này giúp đặt kích thước cột cho ô thành N, N là 1-12, mặc định là 4; tùy chọn cho các phần tử div "bên trong". |
| 6 | mdl-cell--N-col-desktop Điều này giúp đặt kích thước cột cho ô thành N chỉ trong chế độ máy tính để bàn, N là 1-12 bao gồm; tùy chọn cho các phần tử div "bên trong". |
| 7 | mdl-cell--N-col-tablet Điều này giúp đặt kích thước cột cho ô thành N chỉ ở chế độ máy tính bảng, N là 1-8; tùy chọn cho các phần tử div "bên trong". |
| số 8 | mdl-cell--N-col-phone Điều này giúp đặt kích thước cột cho ô thành N chỉ trong chế độ điện thoại, N là 1-4; tùy chọn cho các phần tử div "bên trong". |
| 9 | mdl-cell--hide-desktop Ẩn ô khi ở chế độ máy tính để bàn. Tùy chọn cho các phần tử div "bên trong". |
| 10 | mdl-cell--hide-tablet Ẩn ô khi ở chế độ máy tính bảng. Tùy chọn cho các phần tử div "bên trong". |
| 11 | mdl-cell--hide-phone Ẩn ô khi ở chế độ điện thoại. Tùy chọn cho các phần tử div "bên trong". |
| 12 | mdl-cell--stretch Kéo dài ô theo chiều dọc để điền vào ô cha, mặc định; tùy chọn cho các phần tử div "bên trong". |
| 13 | mdl-cell--top Căn chỉnh ô với đầu ô chính. Tùy chọn cho các phần tử div "bên trong". |
| 14 | mdl-cell--middle Căn chỉnh ô ở giữa ô chính. Tùy chọn cho các phần tử div "bên trong". |
| 15 | mdl-cell--bottom Căn chỉnh ô ở dưới cùng của ô chính. Tùy chọn cho các phần tử div "bên trong". |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng lớp mdl-grid để bố trí nội dung trên các màn hình khác nhau.
Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.
mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout__drawer - Xác định div là ngăn bố trí MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-navigation - Xác định div là nhóm điều hướng MDL.
mdl-navigation__link - Xác định anchor là liên kết điều hướng MDL.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-grid - Xác định div như một thành phần lưới MDL.
mdl-cell - Xác định div là ô MDL.
mdl-cell--1-col - Đặt kích thước cột cho ô thành 1 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--2-col - Đặt kích thước cột cho ô thành 2 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--4-col - Đặt kích thước cột cho ô thành 4 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--6-col - Đặt kích thước cột cho ô thành 6 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--4-col-phone - Đặt kích thước cột cho ô thành 4 ô trong số 4 ô ở kích thước màn hình điện thoại.
mdl-cell--6-col-tablet - Đặt kích thước cột cho ô thành 6 ô trong số 8 ô ở kích thước màn hình máy tính bảng.
mdl-cell--8-col-tablet - Đặt kích thước cột cho ô thành 8 ô trong số 8 ô ở kích thước màn hình máy tính bảng.
mdl_grid.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Thành phần tab Material Design Lite (MDL) là thành phần giao diện người dùng giúp hiển thị nhiều màn hình trong một không gian một cách độc quyền.
MDL 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 được xác định trước khác nhau cho các 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 | mdl-layout Xác định một vùng chứa là một thành phần MDL. Bắt buộc đối với phần tử vùng chứa bên ngoài. |
| 2 | mdl-tabs Xác định vùng chứa tab là một thành phần MDL. Bắt buộc trên phần tử div "bên ngoài". |
| 3 | mdl-js-tabs Đặt hành vi MDL cơ bản cho vùng chứa tab. Bắt buộc trên phần tử div "bên ngoài". |
| 4 | mdl-js-ripple-effect Thêm hiệu ứng nhấp chuột gợn sóng vào các liên kết tab. Không bắt buộc; đi vào phần tử div "bên ngoài". |
| 5 | mdl-tabs__tab-bar Xác định vùng chứa dưới dạng thanh liên kết tab MDL. Bắt buộc đối với phần tử div "bên trong" đầu tiên. |
| 6 | mdl-tabs__tab Xác định một mỏ neo (liên kết) như một trình kích hoạt tab MDL. Bắt buộc trên tất cả các liên kết trong phần tử div "bên trong" đầu tiên. |
| 7 | is-active Xác định một tab là tab hiển thị mặc định. Bắt buộc trên một (và chỉ một) trong số các phần tử div (tab) "bên trong". |
| số 8 | mdl-tabs__panel Xác định vùng chứa dưới dạng nội dung tab. Bắt buộc đối với mỗi phần tử div (tab) "bên trong". |
Thí dụ
Ví dụ sau đây sẽ giúp bạn hiểu việc sử dụng lớp mdl-tab để bố trí nội dung trên các tab khác nhau.
Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này:
mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-tabs - Xác định vùng chứa tab như một thành phần MDL.
mdl-js-tabs - Đặt hành vi MDL cơ bản cho vùng chứa tab.
mdl-tabs__tab-bar - Xác định một vùng chứa dưới dạng thanh liên kết các tab MDL.
mdl-tabs__tab - Xác định một mỏ neo (liên kết) như một trình kích hoạt tab MDL.
is-active - Xác định một tab là tab hiển thị mặc định.
mdl-tabs__panel - Xác định một vùng chứa dưới dạng nội dung tab.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Thành phần chân trang MDL có hai dạng chính: mega-footer và mini-footer. mega-footer chứa nhiều nội dung phức tạp hơn mini-footer. Một mega-footer có thể đại diện cho nhiều phần nội dung được phân tách bằng các quy tắc ngang, trong khi một mini-footer trình bày một phần nội dung. Chân trang thường chứa cả nội dung thông tin và nội dung có thể nhấp, chẳng hạn như liên kết.
MDL 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 được xác định trước khác nhau cho mega-footer và mini-footer. Bảng sau liệt kê 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 | mdl-mega-footer Xác định vùng chứa dưới dạng thành phần MDL mega-footer. Bắt buộc đối với phần tử chân trang. |
| 2 | mdl-mega-footer__top-section Xác định vùng chứa dưới dạng phần trên cùng của chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần trên cùng. |
| 3 | mdl-mega-footer__left-section Xác định vùng chứa là một phần bên trái. Bắt buộc đối với phần tử div "bên trong" phần bên trái. |
| 4 | mdl-mega-footer__social-btn Xác định một hình vuông trang trí trong mega-footer. Bắt buộc đối với phần tử nút (nếu được sử dụng). |
| 5 | mdl-mega-footer__right-section Xác định vùng chứa là một phần bên phải. Bắt buộc đối với phần tử div "bên trong" bên phải. |
| 6 | mdl-mega-footer__middle-section Xác định vùng chứa dưới dạng phần giữa chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần giữa. |
| 7 | mdl-mega-footer__drop-down-section Xác định vùng chứa dưới dạng vùng nội dung thả xuống (dọc). Bắt buộc đối với các phần tử div "bên trong" thả xuống. |
| số 8 | mdl-mega-footer__heading Xác định một tiêu đề là một tiêu đề mega-footer. Bắt buộc đối với phần tử h1 bên trong phần thả xuống. |
| 9 | mdl-mega-footer__link-list Xác định danh sách không có thứ tự dưới dạng danh sách thả xuống (dọc). Bắt buộc đối với phần tử ul bên trong phần thả xuống. |
| 10 | mdl-mega-footer__bottom-section Xác định vùng chứa dưới dạng phần dưới cùng của chân trang. Bắt buộc đối với phần tử div "bên ngoài" phần dưới cùng. |
| 11 | mdl-logo Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu. Bắt buộc đối với phần tử div "bên trong" trong phần dưới cùng của chân trang lớn hoặc phần bên trái của chân trang nhỏ. |
| 12 | mdl-mini-footer Xác định vùng chứa như một thành phần chân trang nhỏ MDL. Bắt buộc đối với phần tử chân trang. |
| 13 | mdl-mini-footer__left-section Xác định vùng chứa là một phần bên trái. Bắt buộc đối với phần tử div "bên trong" phần bên trái. |
| 14 | mdl-mini-footer__link-list Xác định danh sách không có thứ tự là danh sách nội tuyến (ngang). Bắt buộc đối với phần tử ul đối với phần tử div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Xác định vùng chứa là một phần bên phải. Bắt buộc đối với phần tử div "bên trong" bên phải. |
| 16 | mdl-mini-footer__social-btn Xác định một hình vuông trang trí trong chân trang nhỏ. Bắt buộc đối với phần tử nút (nếu được sử dụng). |
Bây giờ, chúng ta hãy xem một vài ví dụ để hiểu việc sử dụng các lớp chân trang MDL để tạo kiểu cho chân trang.
Mega Footer
Hãy để chúng tôi thảo luận về việc sử dụng mdl-mega-footerlớp để bố trí nội dung trong chân trang. Các lớp MDL sau sẽ được sử dụng trong ví dụ này.
mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-mega-footer - Xác định vùng chứa như một thành phần MDL mega-footer.
mdl-mega-footer__top-section - Xác định vùng chứa dưới dạng phần đầu trang.
mdl-mega-footer__left-section - Xác định vùng chứa như một phần bên trái.
mdl-mega-footer__social-btn - Xác định một hình vuông trang trí trong chân trang nhỏ.
mdl-mega-footer__right-section - Xác định container như một phần bên phải.
mdl-mega-footer__middle-section - Xác định vùng chứa như một phần giữa chân trang.
mdl-mega-footer__drop-down-section - Xác định vùng chứa dưới dạng vùng nội dung thả xuống (dọc).
mdl-mega-footer__heading - Xác định một tiêu đề là một tiêu đề mega-footer.
mdl-mega-footer__link-list - Xác định một danh sách không có thứ tự như một danh sách nội tuyến (ngang).
mdl-mega-footer__bottom-section - Xác định vùng chứa như một phần dưới cùng của footer.
mdl-logo - Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu.
mdl_megafooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Chân trang nhỏ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-mini-footer lớp để bố trí nội dung trong chân trang.
Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.
mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-mini-footer - Xác định vùng chứa như một thành phần chân trang nhỏ MDL.
mdl-mini-footer__left-section - Xác định vùng chứa như một phần bên trái.
mdl-logo - Xác định vùng chứa dưới dạng tiêu đề phần được tạo kiểu.
mdl-mini-footer__link-list - Xác định một danh sách không có thứ tự như một danh sách nội tuyến (ngang).
mdl-mini-footer__right-section - Xác định container như một phần bên phải.
mdl_minifooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
Thành phần huy hiệu MDL là 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.
MDL cung cấp một loạt các lớp CSS để á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 huy hiệu. Bảng sau liệt kê 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 | mdl-badge Xác định phần tử là thành phần huy hiệu MDL. Bắt buộc đối với phần tử span hoặc liên kết. |
| 2 | mdl-badge--no-background Áp dụng hiệu ứng vòng tròn mở cho huy hiệu và là tùy chọn. |
| 3 | mdl-badge--overlap Làm cho huy hiệu chồng lên vùng chứa của nó và là tùy chọn. |
| 4 | data-badge="value" Gán giá trị chuỗi cho huy hiệu được sử dụng làm thuộc tính; yêu cầu trên span hoặc liên kết. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-badge lớp để thêm thông báo đến các phần tử span và liên kết.
Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.
mdl-badge - Xác định phần tử như một thành phần huy hiệu MDL.
data-badge- Gán giá trị chuỗi cho huy hiệu. Các biểu tượng có thể được gán cho nó bằng cách sử dụng các ký hiệu HTML.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 liệt kê 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 | mdl-button Đặt nút làm thành phần MDL, bắt buộc. |
| 2 | mdl-js-button Thêm hành vi MDL cơ bản vào nút, bắt buộc. |
| 3 | (none) Đặt hiệu ứng màn hình phẳng thành nút, mặc định. |
| 4 | mdl-button--raised Đặt hiệu ứng hiển thị nâng cao; điều này loại trừ lẫn nhau với fab, mini-fab và icon. |
| 5 | mdl-button--fab Đặt hiệu ứng hiển thị fab (tròn); điều này loại trừ lẫn nhau với biểu tượng được nâng lên, mini-fab và. |
| 6 | mdl-button--mini-fab Đặt hiệu ứng hiển thị mini-fab (hình tròn nhỏ); điều này loại trừ lẫn nhau với biểu tượng được nâng lên, uốn cong. |
| 7 | mdl-button--icon Đặt biểu tượng (hình tròn nhỏ đơn giản) hiệu ứng hiển thị; điều này loại trừ lẫn nhau với nâng cao, fab và mini-fab. |
| số 8 | mdl-button--colored Đặt hiệu ứng hiển thị màu trong đó màu được xác định trong material.min.css. |
| 9 | mdl-button--primary Đặt hiệu ứng hiển thị màu chính trong đó các màu được xác định trong material.min.css. |
| 10 | mdl-button--accent Đặt hiệu ứng hiển thị màu nhấn trong đó các màu được xác định trong material.min.css. |
| 11 | mdl-js-ripple-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 sẽ giúp bạn hiểu việc sử dụng mdl-button các lớp để hiển thị các loại nút khác nhau.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước và hiển thị các loại thẻ khác nhau. Bảng sau liệt kê 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 | mdl-card Xác định phần tử div như một vùng chứa thẻ MDL, bắt buộc trên div "bên ngoài". |
| 2 | mdl-card--border Đặt đường viền cho phần thẻ mà nó được áp dụng và được sử dụng trên các div "bên trong". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Đặt độ sâu bóng thay đổi (2, 3, 4, 6, 8 hoặc 16) cho thẻ và là tùy chọn, đi trên div "bên ngoài"; nếu bỏ qua, không có bóng nào được hiển thị. |
| 4 | mdl-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". |
| 5 | mdl-card__title-text Đặt các đặc điểm văn bản thích hợp cho tiêu đề thẻ và được yêu cầu trên thẻ head (H1 - H6) bên trong div tiêu đề. |
| 6 | mdl-card__subtitle-text Đặt các đặc điểm văn bản vào phụ đề thẻ và là tùy chọn. Nó phải là một phần tử con của phần tử tiêu đề. |
| 7 | mdl-card__media Xác định div là một vùng chứa phương tiện thẻ và được yêu cầu trên div phương tiện "bên trong". |
| số 8 | mdl-card__supporting-text Xác định div là vùng chứa văn bản nội dung thẻ và gán các đặc điểm văn bản thích hợp cho văn bản nội dung và được yêu cầu trên div văn bản nội dung "bên trong"; văn bản đi trực tiếp bên trong div mà không có vùng chứa xen vào. |
| 9 | mdl-card__actions 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 và được yêu cầu đố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. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-tooltip để hiển thị các loại chú giải công cụ khác nhau.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại 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 | mdl-js-progress Đặt hành vi MDL cơ bản thành chỉ báo tiến trình và là một lớp bắt buộc. |
| 2 | mdl-progress__indeterminate Đặt hoạt ảnh thành chỉ báo tiến trình và là một lớp tùy chọn. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-js-progress các lớp để hiển thị các loại thanh tiến trình khác nhau.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị các loại spinners khác nhau. Bảng sau liệt kê 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 | mdl-spinner Xác định vùng chứa là thành phần MDL spinner và là một lớp bắt buộc. |
| 2 | mdl-js-spinner Đặt hành vi MDL cơ bản thành spinner và là một lớp bắt buộc. |
| 3 | is-active Hiển thị và tạo hoạt ảnh cho con quay và là tùy chọn. |
| 4 | mdl-spinner--single-color Sử dụng một màu duy nhất thay vì thay đổi màu sắc và là tùy chọn. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-spinner các lớp và các loại máy quay khác nhau.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước và hiển thị các loại menu khác nhau. Bảng sau liệt kê 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 | mdl-button Xác định nút như một thành phần MDL và được yêu cầu trên phần tử nút. |
| 2 | mdl-js-button Đặt hành vi MDL cơ bản cho nút và được yêu cầu trên phần tử nút. |
| 3 | mdl-button--icon Đặt biểu tượng thành nút và được yêu cầu trên phần tử nút. |
| 4 | material-icons Xác định span là một biểu tượng vật liệu và được yêu cầu trên một phần tử nội tuyến. |
| 5 | mdl-menu Xác định vùng chứa danh sách không có thứ tự là một thành phần MDL và được yêu cầu trên phần tử ul. |
| 6 | mdl-js-menu Đặt hành vi MDL cơ bản cho menu và được yêu cầu trên phần tử ul. |
| 7 | mdl-menu__item Xác định các nút dưới dạng tùy chọn menu MDL và đặt hành vi MDL cơ bản, được yêu cầu trên các phần tử mục danh sách. |
| số 8 | mdl-js-ripple-effect Đặt hiệu ứng nhấp chuột gợn sóng cho các liên kết tùy chọn và là tùy chọn; yêu cầu trên phần tử danh sách không có thứ tự. |
| 9 | mdl-menu--top-left Đặt vị trí menu phía trên nút, căn lề trái của menu bằng nút và là tùy chọn; yêu cầu trên phần tử danh sách không có thứ tự. |
| 10 | (none) Theo mặc định, menu được đặt bên dưới nút, căn chỉnh với cạnh trái bằng nút. |
| 11 | mdl-menu--top-right Menu được đặt ở vị trí phía trên nút, căn chỉnh sang cạnh bên phải bằng nút, tùy chọn và nằm trên phần tử danh sách không có thứ tự. |
| 12 | mdl-menu--bottom-right menu được định vị bên dưới nút, căn chỉnh sang cạnh bên phải với nút, tùy chọn và đi trên phần tử danh sách không có thứ tự. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-spinner các lớp để hiển thị các loại spinners khác nhau.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại menu khác nhau. Bảng sau liệt kê 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 | mdl-slider Xác định yếu tố đầu vào là một thành phần MDL và là bắt buộc. |
| 2 | mdl-js-slider Đặt hành vi MDL cơ bản cho phần tử đầu vào và là bắt buộc. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-slider để hiển thị các loại thanh trượt khác nhau.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị các loại hộp kiểm khác nhau. Bảng sau liệt kê 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 | mdl-checkbox Xác định nhãn như một thành phần MDL và được yêu cầu trên phần tử nhãn. |
| 2 | mdl-js-checkbox Đặt hành vi MDL cơ bản cho nhãn và được yêu cầu trên phần tử nhãn. |
| 3 | mdl-checkbox__input Đặt hành vi MDL cơ bản thành hộp kiểm và được yêu cầu trên phần tử đầu vào (hộp kiểm). |
| 4 | mdl-checkbox__label Đặt hành vi MDL cơ bản thành chú thích và được yêu cầu trên phần tử span (chú thích). |
| 5 | mdl-js-ripple-effect Đặt hiệu ứng nhấp chuột gợn sóng và là tùy chọn; đi trên phần tử nhãn chứ không phải phần tử đầu vào (hộp kiểm). |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-slider để hiển thị các loại hộp kiểm khác nhau.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại nút radio khác nhau. Bảng sau liệt kê 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 | mdl-radio Xác định nhãn như một thành phần MDL và được yêu cầu trên phần tử nhãn. |
| 2 | mdl-js-radio Đặt hành vi MDL cơ bản cho nhãn và được yêu cầu trên phần tử nhãn. |
| 3 | mdl-radio__button Đặt hành vi MDL cơ bản cho radio và được yêu cầu trên phần tử đầu vào (nút radio). |
| 4 | mdl-radio__label Đặt hành vi MDL cơ bản thành chú thích và được yêu cầu trên phần tử span (chú thích). |
| 5 | mdl-js-ripple-effect Đặt hiệu ứng nhấp chuột gợn sóng và là tùy chọn; đi trên phần tử nhãn chứ không phải phần tử đầu vào (nút radio). |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-slider để hiển thị các loại nút radio khác nhau.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị các loại hộp kiểm khác nhau dưới dạng biểu tượng. Bảng sau liệt kê 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 | mdl-icon-toggle Xác định nhãn như một thành phần MDL và được yêu cầu trên phần tử nhãn. |
| 2 | mdl-js-icon-toggle Đặt hành vi MDL cơ bản cho nhãn và được yêu cầu trên phần tử nhãn. |
| 3 | mdl-icon-toggle__input Đặt hành vi MDL cơ bản thành chuyển đổi biểu tượng và được yêu cầu trên phần tử đầu vào (chuyển đổi biểu tượng). |
| 4 | mdl-icon-toggle__label Đặt hành vi MDL cơ bản thành chú thích và được yêu cầu trên phần tử i (biểu tượng). |
| 5 | mdl-js-ripple-effect Đặt hiệu ứng nhấp chuột gợn sóng và là tùy chọn; đi trên phần tử nhãn chứ không phải phần tử đầu vào (biểu tượng-chuyển đổi). |
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng mdl-icon-toggle các lớp để hiển thị các loại hộp kiểm khác nhau dưới dạng biểu tượng.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại hộp kiểm khác nhau dưới dạng công tắc. Bảng sau liệt kê 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 | mdl-switch Xác định nhãn như một thành phần MDL và được yêu cầu trên phần tử nhãn. |
| 2 | mdl-js-switch Đặt hành vi MDL cơ bản cho nhãn và được yêu cầu trên phần tử nhãn. |
| 3 | mdl-switch__input Đặt hành vi MDL cơ bản để chuyển đổi và được yêu cầu trên phần tử đầu vào (công tắc). |
| 4 | mdl-switch__label Đặt hành vi MDL cơ bản thành chú thích và được yêu cầu trên phần tử đầu vào (chú thích). |
| 5 | mdl-js-ripple-effect Đặt hiệu ứng nhấp chuột gợn sóng và là tùy chọn; đi trên phần tử nhãn chứ không phải phần tử đầu vào (công tắc). |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-switch và các loại hộp kiểm khác nhau như switch.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị một bảng dưới dạng bảng dữ liệu. Bảng sau liệt kê 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 | mdl-data-table Xác định bảng là một thành phần MDL và được yêu cầu trên phần tử bảng. |
| 2 | mdl-js-data-table Đặt hành vi MDL cơ bản cho bảng và được yêu cầu trên phần tử bảng. |
| 3 | mdl-data-table--selectable Đặt tất cả / hành vi có thể chọn riêng lẻ (hộp kiểm) và là tùy chọn; đi vào phần tử bảng. |
| 4 | mdl-data-table__cell--non-numeric Đặt định dạng văn bản thành ô dữ liệu và là tùy chọn; đi trên cả tiêu đề bảng và ô dữ liệu bảng. |
| 5 | (none) Theo mặc định, đặt định dạng số thành tiêu đề hoặc ô dữ liệu. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-data-table các lớp để hiển thị một bảng dữ liệu.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại đầu vào văn bản khác nhau. Bảng sau liệt kê 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 | mdl-textfield Xác định vùng chứa là một thành phần MDL và được yêu cầu trên phần tử div "bên ngoài". |
| 2 | mdl-js-textfield Đặt hành vi MDL cơ bản cho đầu vào và được yêu cầu trên phần tử div "bên ngoài". |
| 3 | mdl-textfield__input Xác định phần tử là đầu vào trường văn bản và được yêu cầu trên phần tử đầu vào hoặc phần tử textarea. |
| 4 | mdl-textfield__label Xác định phần tử là nhãn trường văn bản và được yêu cầu trên phần tử nhãn cho các phần tử đầu vào hoặc vùng văn bản. |
| 5 | mdl-textfield--floating-label Áp dụng hiệu ứng nhãn nổi và là tùy chọn; đi vào phần tử div "bên ngoài". |
| 6 | mdl-textfield__error Xác định span dưới dạng thông báo lỗi MDL và là tùy chọn; đi vào phần tử span cho phần tử đầu vào MDL với mẫu. |
| 7 | mdl-textfield--expandable Xác định một div là một vùng chứa trường văn bản có thể mở rộng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên ngoài". |
| số 8 | mdl-button Xác định nhãn dưới dạng nút biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 9 | mdl-js-button Đặt hành vi cơ bản cho vùng chứa biểu tượng; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 10 | mdl-button--icon Xác định nhãn là một vùng chứa biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 11 | mdl-input__expandable-holder Xác định một vùng chứa như một thành phần MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên trong". |
| 12 | is-invalid Xác định trường văn bản là không hợp lệ khi tải ban đầu và là tùy chọn trên phần tử mdl-textfield. |
Thí dụ
Ví dụ sau đây sẽ giúp bạn hiểu việc sử dụng các lớp mdl-textfield để hiển thị các loại trường văn bản khác nhau.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại chú giải công cụ khác nhau. Bảng sau liệt kê 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 | mdl-tooltip Xác định vùng chứa dưới dạng chú giải công cụ MDL và được yêu cầu trên phần tử vùng chứa chú giải công cụ. |
| 2 | mdl-tooltip--large Đặt hiệu ứng phông chữ lớn và là tùy chọn; đi vào phần tử vùng chứa chú giải công cụ. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-tooltip các lớp để hiển thị các loại chú giải công cụ khác nhau.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.