Material Design Lite - Menu
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 là 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ự như 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 trình đơn được đặt bên dưới nút, căn chỉnh sang cạnh bên phải bằng nút, tùy chọn và đi vào 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ả.