Material Design Lite - เมนู
MDL มีคลาส CSS ที่หลากหลายเพื่อใช้การปรับปรุงภาพและพฤติกรรมต่างๆที่กำหนดไว้ล่วงหน้าและแสดงเมนูประเภทต่างๆ ตารางต่อไปนี้แสดงรายการคลาสที่มีและเอฟเฟกต์
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | mdl-button ระบุปุ่มเป็นส่วนประกอบ MDL และจำเป็นสำหรับองค์ประกอบปุ่ม |
| 2 | mdl-js-button ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นปุ่มและจำเป็นสำหรับองค์ประกอบปุ่ม |
| 3 | mdl-button--icon ตั้งค่าไอคอนเป็นปุ่มและจำเป็นสำหรับองค์ประกอบปุ่ม |
| 4 | material-icons ระบุสแปนเป็นไอคอนวัสดุและจำเป็นสำหรับองค์ประกอบแบบอินไลน์ |
| 5 | mdl-menu ระบุคอนเทนเนอร์รายการที่ไม่เรียงลำดับเป็นส่วนประกอบ MDL และจำเป็นสำหรับองค์ประกอบ ul |
| 6 | mdl-js-menu ตั้งค่าพฤติกรรม MDL พื้นฐานเป็นเมนูและจำเป็นสำหรับองค์ประกอบ ul |
| 7 | mdl-menu__item ระบุปุ่มเป็นตัวเลือกเมนู MDL และตั้งค่าลักษณะการทำงานพื้นฐานของ MDL ซึ่งจำเป็นสำหรับองค์ประกอบรายการ |
| 8 | mdl-js-ripple-effect ตั้งค่าเอฟเฟกต์การคลิกระลอกเป็นลิงก์ตัวเลือกและเป็นทางเลือก จำเป็นสำหรับองค์ประกอบรายการที่ไม่ได้เรียงลำดับ |
| 9 | mdl-menu--top-left ตั้งค่าตำแหน่งเมนูปุ่มด้านบนจัดชิดขอบด้านซ้ายของเมนูด้วยปุ่มและเป็นทางเลือก จำเป็นสำหรับองค์ประกอบรายการที่ไม่ได้เรียงลำดับ |
| 10 | (none) ตามค่าเริ่มต้นเมนูจะอยู่ในตำแหน่งปุ่มด้านล่างจัดชิดขอบด้านซ้ายด้วยปุ่ม |
| 11 | mdl-menu--top-right เมนูอยู่ในตำแหน่งปุ่มด้านบนจัดชิดขอบด้านขวาพร้อมปุ่มตัวเลือกและไปที่องค์ประกอบรายการที่ไม่เรียงลำดับ |
| 12 | mdl-menu--bottom-right เมนูอยู่ในตำแหน่งปุ่มด้านล่างจัดชิดขอบด้านขวาพร้อมปุ่มเป็นทางเลือกและไปที่องค์ประกอบรายการที่ไม่เรียงลำดับ |
ตัวอย่าง
ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-spinner คลาสเพื่อแสดงสปินเนอร์ประเภทต่างๆ
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์