Material Design Lite - แท็บ

ส่วนประกอบของแท็บ Material Design Lite (MDL) เป็นส่วนประกอบของอินเทอร์เฟซผู้ใช้ที่ช่วยในการแสดงหลายหน้าจอในพื้นที่เดียวในลักษณะพิเศษ

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

ซีเนียร์	ชื่อชั้นเรียนและคำอธิบาย
1	mdl-layout ระบุคอนเทนเนอร์เป็นส่วนประกอบ MDL จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายนอก
2	mdl-tabs ระบุคอนเทนเนอร์แท็บเป็นส่วนประกอบ MDL จำเป็นสำหรับองค์ประกอบ div "ด้านนอก"
3	mdl-js-tabs ตั้งค่าลักษณะการทำงานพื้นฐานของ MDL เป็นแท็บคอนเทนเนอร์ จำเป็นสำหรับองค์ประกอบ div "ด้านนอก"
4	mdl-js-ripple-effect เพิ่มเอฟเฟกต์การคลิกแบบระลอกให้กับลิงก์แท็บ ไม่จำเป็น; ไปที่องค์ประกอบ div "ด้านนอก"
5	mdl-tabs__tab-bar ระบุคอนเทนเนอร์เป็นแถบลิงก์แท็บ MDL จำเป็นสำหรับองค์ประกอบ div "ภายใน" แรก
6	mdl-tabs__tab ระบุจุดยึด (ลิงค์) เป็นตัวกระตุ้นแท็บ MDL จำเป็นสำหรับลิงก์ทั้งหมดในองค์ประกอบ div "ภายใน" แรก
7	is-active ระบุแท็บเป็นแท็บการแสดงผลเริ่มต้น จำเป็นสำหรับองค์ประกอบ div (แท็บ) หนึ่ง (และเพียงรายการเดียว)
8	mdl-tabs__panel ระบุคอนเทนเนอร์เป็นเนื้อหาแท็บ จำเป็นสำหรับองค์ประกอบ div (แท็บ) "ด้านใน" แต่ละรายการ

ตัวอย่าง

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้คลาส mdl-tab เพื่อจัดเค้าโครงเนื้อหาบนแท็บต่างๆ

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

mdl-layout - ระบุ div เป็นส่วนประกอบ MDL
mdl-js-layout - เพิ่มพฤติกรรม MDL พื้นฐานให้กับ div ภายนอก
mdl-layout--fixed-header - ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก
mdl-layout__header-row - ระบุคอนเทนเนอร์เป็นแถวส่วนหัวของ MDL
mdl-layout-title - ระบุข้อความหัวเรื่องเค้าโครง
mdl-layout__content - ระบุ div เป็นเนื้อหาเค้าโครง MDL
mdl-tabs - ระบุคอนเทนเนอร์แท็บเป็นส่วนประกอบ MDL
mdl-js-tabs - ตั้งค่าพฤติกรรม MDL พื้นฐานให้กับแท็บคอนเทนเนอร์
mdl-tabs__tab-bar - ระบุคอนเทนเนอร์เป็นแถบลิงก์แท็บ MDL
mdl-tabs__tab - ระบุจุดยึด (ลิงค์) เป็นตัวกระตุ้นแท็บ MDL
is-active - ระบุแท็บเป็นแท็บการแสดงผลเริ่มต้น
mdl-tabs__panel - ระบุคอนเทนเนอร์เป็นเนื้อหาแท็บ

mdl_tabs.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>   
   </body>
</html>

ผลลัพธ์

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