Material Design Lite - ปุ่มต่างๆ
MDL มีคลาส CSS ที่หลากหลายเพื่อใช้การปรับปรุงภาพและพฤติกรรมที่กำหนดไว้ล่วงหน้าต่างๆกับปุ่ม ตารางต่อไปนี้แสดงรายการคลาสที่มีและเอฟเฟกต์
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | mdl-button ตั้งค่าปุ่มเป็นส่วนประกอบ MDL จำเป็น |
| 2 | mdl-js-button จำเป็นต้องเพิ่มลักษณะการทำงานของ MDL พื้นฐานให้กับปุ่ม |
| 3 | (none) ตั้งค่าเอฟเฟกต์การแสดงผลแบบแบนเป็นปุ่มค่าเริ่มต้น |
| 4 | mdl-button--raised ตั้งค่าเอฟเฟกต์การแสดงผลที่เพิ่มขึ้น สิ่งนี้เป็นเอกสิทธิ์เฉพาะร่วมกับ fab, mini-fab และ icon |
| 5 | mdl-button--fab ตั้งค่าเอฟเฟกต์การแสดงผล fab (วงกลม); สิ่งนี้เป็นเอกสิทธิ์เฉพาะร่วมกับยกระดับมินิแฟ็บและไอคอน |
| 6 | mdl-button--mini-fab ตั้งค่าเอฟเฟกต์การแสดงผลแบบ mini-fab (วงกลมเล็ก ๆ ) สิ่งนี้เป็นเอกสิทธิ์เฉพาะร่วมกับยก fab และไอคอน |
| 7 | mdl-button--icon ตั้งค่าไอคอนเอฟเฟกต์การแสดงผล (วงกลมเล็กธรรมดา); สิ่งนี้เป็นเอกสิทธิ์เฉพาะร่วมกับยก fab และ mini-fab |
| 8 | mdl-button--colored ตั้งค่าเอฟเฟกต์การแสดงสีที่กำหนดสีไว้ใน material.min.css |
| 9 | mdl-button--primary ตั้งค่าเอฟเฟกต์การแสดงสีหลักที่กำหนดสีใน material.min.css |
| 10 | mdl-button--accent ตั้งค่าเอฟเฟกต์การแสดงสีแบบเน้นเสียงที่กำหนดสีใน material.min.css |
| 11 | mdl-js-ripple-effect ตั้งค่าเอฟเฟกต์การคลิกระลอกคลื่นสามารถใช้ร่วมกับคลาสอื่น ๆ ได้ |
ตัวอย่าง
ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-button คลาสเพื่อแสดงปุ่มประเภทต่างๆ
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>ผลลัพธ์
ตรวจสอบผลลัพธ์