Material Design Lite - กริด

ตาราง Material Design Lite (MDL) เป็นส่วนประกอบสำหรับการจัดวางเนื้อหาสำหรับขนาดหน้าจอที่แตกต่างกัน กริด MDL ถูกกำหนดและล้อมรอบด้วยองค์ประกอบ container / div เส้นตารางมี 12 คอลัมน์ในหน้าจอขนาดเดสก์ท็อป 8 ในหน้าจอขนาดแท็บเล็ตและ 4 ในหน้าจอขนาดโทรศัพท์โดยแต่ละขนาดจะมีระยะขอบและรางน้ำที่กำหนดไว้ล่วงหน้า เซลล์จะถูกจัดวางตามลำดับในแถวตามลำดับที่กำหนดโดยมีข้อยกเว้นดังนี้

  • หากเซลล์กริดไม่พอดีกับแถวในขนาดหน้าจอใดขนาดหนึ่งเซลล์จะไหลไปยังบรรทัดต่อไปนี้

  • หากเซลล์ตารางมีขนาดคอลัมน์ที่ระบุเท่ากับหรือมากกว่าจำนวนคอลัมน์สำหรับขนาดหน้าจอก็จะใช้ทั้งแถว

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

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

mdl-layout

ระบุคอนเทนเนอร์เป็นส่วนประกอบ MDL จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายนอก

2

mdl-grid

ระบุคอนเทนเนอร์เป็นส่วนประกอบกริด MDL จำเป็นสำหรับองค์ประกอบ div "ด้านนอก"

3

mdl-cell

ระบุคอนเทนเนอร์เป็นเซลล์ MDL จำเป็นสำหรับองค์ประกอบ div "ภายใน"

4

mdl-grid--no-spacing

อัปเดตเซลล์กริดเพื่อให้ไม่มีระยะขอบระหว่างเซลล์เหล่านี้ ทางเลือกสำหรับคอนเทนเนอร์กริด

5

mdl-cell--N-col

สิ่งนี้ช่วยให้ขนาดคอลัมน์สำหรับเซลล์เป็น N, N คือ 1-12 รวมค่าเริ่มต้นเป็น 4; ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

6

mdl-cell--N-col-desktop

สิ่งนี้ช่วยให้ขนาดคอลัมน์สำหรับเซลล์เป็น N ในโหมดเดสก์ท็อปเท่านั้น N คือ 1-12 รวม; ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

7

mdl-cell--N-col-tablet

สิ่งนี้ช่วยให้ขนาดคอลัมน์สำหรับเซลล์เป็น N ในโหมดแท็บเล็ตเท่านั้น N คือ 1-8 รวม; ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

8

mdl-cell--N-col-phone

สิ่งนี้ช่วยให้ขนาดคอลัมน์สำหรับเซลล์เป็น N ในโหมดโทรศัพท์เท่านั้นรวม N คือ 1-4 ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

9

mdl-cell--hide-desktop

ซ่อนเซลล์เมื่ออยู่ในโหมดเดสก์ท็อป ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

10

mdl-cell--hide-tablet

ซ่อนเซลล์เมื่ออยู่ในโหมดแท็บเล็ต ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

11

mdl-cell--hide-phone

ซ่อนเซลล์เมื่ออยู่ในโหมดโทรศัพท์ ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

12

mdl-cell--stretch

ยืดเซลล์ในแนวตั้งเพื่อเติมพาเรนต์ค่าเริ่มต้น ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

13

mdl-cell--top

จัดตำแหน่งเซลล์ให้อยู่ด้านบนสุดของพาเรนต์ ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

14

mdl-cell--middle

จัดแนวเซลล์ตรงกลางของพาเรนต์ ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

15

mdl-cell--bottom

จัดตำแหน่งเซลล์ให้อยู่ด้านล่างสุดของพาเรนต์ ไม่บังคับสำหรับองค์ประกอบ div "ภายใน"

ตัวอย่าง

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

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

  • mdl-layout - ระบุ div เป็นส่วนประกอบ MDL

  • mdl-js-layout - เพิ่มพฤติกรรม MDL พื้นฐานให้กับ div ภายนอก

  • mdl-layout--fixed-header - ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก

  • mdl-layout__header-row - ระบุคอนเทนเนอร์เป็นแถวส่วนหัวของ MDL

  • mdl-layout__drawer - ระบุ div เป็นลิ้นชักเค้าโครง MDL

  • mdl-layout-title - ระบุข้อความหัวเรื่องเค้าโครง

  • mdl-navigation - ระบุ div เป็นกลุ่มการนำทาง MDL

  • mdl-navigation__link - ระบุจุดยึดเป็นลิงค์นำทาง MDL

  • mdl-layout__content - ระบุ div เป็นเนื้อหาเค้าโครง MDL

  • mdl-grid - ระบุ div เป็นส่วนประกอบกริด MDL

  • mdl-cell - ระบุ div เป็นเซลล์ MDL

  • mdl-cell--1-col - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 1 เซลล์จาก 12 เซลล์ในขนาดหน้าจอเดสก์ท็อป

  • mdl-cell--2-col - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 2 เซลล์จาก 12 เซลล์ในขนาดหน้าจอเดสก์ท็อป

  • mdl-cell--4-col - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 4 เซลล์จาก 12 เซลล์ในขนาดหน้าจอเดสก์ท็อป

  • mdl-cell--6-col - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 6 เซลล์จาก 12 เซลล์ในขนาดหน้าจอเดสก์ท็อป

  • mdl-cell--4-col-phone - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 4 เซลล์จาก 4 เซลล์ในขนาดหน้าจอโทรศัพท์

  • mdl-cell--6-col-tablet - ตั้งค่าขนาดคอลัมน์สำหรับเซลล์เป็น 6 เซลล์จาก 8 เซลล์ในขนาดหน้าจอแท็บเล็ต

  • mdl-cell--8-col-tablet - ตั้งค่าขนาดคอลัมน์ของเซลล์เป็น 8 เซลล์จาก 8 เซลล์ในขนาดหน้าจอแท็บเล็ต

mdl_grid.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">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </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 Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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