Material Design Lite - เลย์เอาต์

ในบทนี้เราจะพูดถึงเค้าโครงต่างๆใน Material Design Lite HTML5 มีองค์ประกอบคอนเทนเนอร์ดังต่อไปนี้ -

  • <div> - จัดเตรียมคอนเทนเนอร์ทั่วไปสำหรับเนื้อหา HTML

  • <header> - แสดงถึงส่วนหัว

  • <footer> - แสดงถึงส่วนท้าย

  • <article> - แสดงถึงบทความ

  • <section> - จัดเตรียมคอนเทนเนอร์ทั่วไปสำหรับส่วนประเภทต่างๆ

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

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

mdl-layout

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

2

mdl-js-layout

เพิ่มพฤติกรรม MDL พื้นฐานในเค้าโครง จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายนอก

3

mdl-layout__header

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

4

mdl-layout-icon

ใช้เพื่อเพิ่มไอคอนแอปพลิเคชัน ถูกแทนที่ด้วยไอคอนเมนูหากมองเห็นทั้งสองอย่าง องค์ประกอบไอคอนเสริม

5

mdl-layout__header-row

ระบุคอนเทนเนอร์เป็นแถวส่วนหัวของ MDL จำเป็นบนคอนเทนเนอร์เนื้อหาส่วนหัว

6

mdl-layout__title

ระบุข้อความหัวเรื่องเค้าโครง จำเป็นสำหรับคอนเทนเนอร์หัวเรื่องเค้าโครง

7

mdl-layout-spacer

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

8

mdl-navigation

ระบุคอนเทนเนอร์เป็นกลุ่มการนำทาง MDL จำเป็นสำหรับองค์ประกอบ nav

9

mdl-navigation__link

ระบุจุดยึดเป็นลิงก์การนำทาง MDL จำเป็นสำหรับองค์ประกอบส่วนหัวและ / หรือส่วนยึดลิ้นชัก

10

mdl-layout__drawer

ระบุคอนเทนเนอร์เป็นลิ้นชักเค้าโครง MDL จำเป็นสำหรับองค์ประกอบตู้ลิ้นชัก

11

mdl-layout__content

ระบุคอนเทนเนอร์เป็นเนื้อหาโครงร่าง MDL จำเป็นสำหรับองค์ประกอบหลัก

12

mdl-layout__header--scroll

ทำให้ส่วนหัวเลื่อนไปพร้อมกับเนื้อหา ไม่บังคับสำหรับองค์ประกอบส่วนหัว

13

mdl-layout--fixed-drawer

ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่ เป็นทางเลือกสำหรับองค์ประกอบคอนเทนเนอร์ด้านนอกและไม่อยู่ในองค์ประกอบคอนเทนเนอร์ลิ้นชัก

14

mdl-layout--fixed-header

ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก ไม่บังคับสำหรับองค์ประกอบคอนเทนเนอร์ด้านนอก

15

mdl-layout--large-screen-only

ซ่อนองค์ประกอบบนหน้าจอขนาดเล็ก ไม่บังคับสำหรับลูกหลานของ mdl-layout

16

mdl-layout--small-screen-only

ซ่อนองค์ประกอบบนหน้าจอขนาดใหญ่ ไม่บังคับสำหรับลูกหลานของ mdl-layout

17

mdl-layout__header--waterfall

อนุญาตเอฟเฟกต์ "น้ำตก" ที่มีบรรทัดส่วนหัวหลายบรรทัด ไม่บังคับสำหรับองค์ประกอบส่วนหัว

18

mdl-layout__header--transparent

ทำให้ส่วนหัวโปร่งใสและดึงด้านบนของพื้นหลังเค้าโครง ไม่บังคับสำหรับองค์ประกอบส่วนหัว

19

mdl-layout__header--seamed

ใช้ส่วนหัวที่ไม่มีเงา ไม่บังคับสำหรับองค์ประกอบส่วนหัว

20

mdl-layout__tab-bar

ระบุคอนเทนเนอร์เป็นแถบแท็บ MDL จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายในส่วนหัว (เค้าโครงแบบแท็บ)

21

mdl-layout__tab

ระบุจุดยึดเป็นลิงก์แท็บ MDL จำเป็นสำหรับองค์ประกอบจุดยึดแถบแท็บ

22

is-active

ระบุแท็บเป็นแท็บเริ่มต้นที่ใช้งานอยู่ ไม่บังคับสำหรับองค์ประกอบจุดยึดแถบแท็บและองค์ประกอบส่วนแท็บที่เกี่ยวข้อง

23

mdl-layout__tab-panel

ระบุคอนเทนเนอร์เป็นแผงเนื้อหาแท็บ จำเป็นสำหรับองค์ประกอบส่วนแท็บ

24

mdl-layout--fixed-tabs

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

ตัวอย่างต่อไปนี้แสดงการใช้คลาส mdl-layout เพื่อจัดสไตล์คอนเทนเนอร์ต่างๆ

ลิ้นชักคงที่

ในการสร้างเทมเพลตที่มีลิ้นชักคงที่ แต่ไม่มีส่วนหัวจะใช้คลาส MDL ต่อไปนี้

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

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

  • mdl-layout--fixed-drawer - ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่

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

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

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

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

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

mdl_fixeddrawer.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>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

ส่วนหัวคงที่

ในการสร้างเทมเพลตที่มีส่วนหัวคงที่หลังจากใช้คลาส MDL เพิ่มเติม

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

mdl_fixedheader.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>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

ส่วนหัวและลิ้นชักคงที่

ในการสร้างเทมเพลตที่มีส่วนหัวคงที่และลิ้นชักคงที่จะใช้คลาส MDL เพิ่มเติมต่อไปนี้

  • mdl-layout--fixed-drawer - ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่

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

mdl_fixedheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

เลื่อนส่วนหัว

ในการสร้างเทมเพลตที่มีส่วนหัวแบบเลื่อนจะใช้คลาส MDL ต่อไปนี้

  • mdl-layout--header--scroll - ทำให้ส่วนหัวเลื่อนไปพร้อมกับเนื้อหา

mdl_scrollingheader.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>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

ส่วนหัวของสัญญา

ในการสร้างเทมเพลตที่มีส่วนหัวที่ทำสัญญาเมื่อเลื่อนหน้าลงจะใช้คลาส MDL ต่อไปนี้

  • mdl-layout__header--waterfall - อนุญาตเอฟเฟกต์ "น้ำตก" ที่มีส่วนหัวหลายบรรทัด

mdl_waterfallheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

แก้ไขส่วนหัวด้วยแท็บที่เลื่อนได้

ในการสร้างเทมเพลตที่มีส่วนหัวที่มีแท็บแบบเลื่อนได้จะใช้คลาส MDL ต่อไปนี้

  • mdl-layout__tab-bar - ระบุคอนเทนเนอร์เป็นแถบแท็บ MDL

  • mdl-layout__tab - ระบุจุดยึดเป็นลิงก์แท็บ MDL

  • mdl-layout__tab-panel - ระบุคอนเทนเนอร์เป็นแผงเนื้อหาแท็บ

mdl_scrollabletabheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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

แก้ไขส่วนหัวด้วยแท็บคงที่

ในการสร้างเทมเพลตที่มีส่วนหัวที่มีแท็บคงที่จะใช้คลาส MDL เพิ่มเติมต่อไปนี้

  • mdl-layout--fixed-tabs - ใช้แท็บคงที่แทนแท็บเริ่มต้นที่เลื่อนได้

mdl_fixedtabheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

ผลลัพธ์

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