Material Design Lite - ป้าย

ส่วนประกอบป้าย MDL คือการแจ้งเตือนบนหน้าจอซึ่งอาจเป็นตัวเลขหรือไอคอน โดยทั่วไปจะใช้เพื่อเน้นจำนวนรายการ

MDL มีคลาส CSS ที่หลากหลายเพื่อใช้การปรับปรุงภาพและพฤติกรรมที่กำหนดไว้ล่วงหน้าต่างๆกับป้าย ตารางต่อไปนี้แสดงรายการคลาสที่มีและเอฟเฟกต์

ซีเนียร์	ชื่อชั้นเรียนและคำอธิบาย
1	mdl-badge ระบุองค์ประกอบเป็นองค์ประกอบป้าย MDL จำเป็นสำหรับองค์ประกอบช่วงหรือลิงก์
2	mdl-badge--no-background ใช้เอฟเฟกต์วงกลมเปิดกับป้ายและเป็นทางเลือก
3	mdl-badge--overlap ทำให้ป้ายทับซ้อนกับคอนเทนเนอร์และเป็นทางเลือก
4	data-badge="value" กำหนดค่าสตริงให้กับตราที่ใช้เป็นแอตทริบิวต์ จำเป็นสำหรับช่วงหรือลิงค์

ตัวอย่าง

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-badge คลาสเพื่อเพิ่มการแจ้งเตือนไปยังองค์ประกอบช่วงและลิงก์

คลาส MDL ที่ระบุด้านล่างจะถูกใช้ในตัวอย่างนี้

mdl-badge - ระบุองค์ประกอบเป็นองค์ประกอบป้าย MDL
data-badge- กำหนดค่าสตริงให้กับตราสัญลักษณ์ สามารถกำหนดไอคอนได้โดยใช้สัญลักษณ์ 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>

ผลลัพธ์

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