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>

ผลลัพธ์

ตรวจสอบผลลัพธ์