Material Design Lite - คู่มือฉบับย่อ

Material Design Lite คืออะไร

Material Design Lite (MDL คือไลบรารีองค์ประกอบ UI ที่สร้างด้วย CSS, JavaScript และ HTML ส่วนประกอบ MDL UI ช่วยในการสร้างหน้าเว็บและเว็บแอปที่น่าดึงดูดสอดคล้องและใช้งานได้ในขณะที่ยึดหลักการออกแบบเว็บสมัยใหม่เช่นการพกพาของเบราว์เซอร์ความเป็นอิสระของอุปกรณ์ และความเสื่อมโทรมอย่างงดงาม

คุณสมบัติเด่นของ Material Design Lite มีดังต่อไปนี้ -

  • การออกแบบที่ตอบสนองในตัว

  • CSS มาตรฐานที่มีพื้นที่น้อยที่สุด

  • รวมถึงเวอร์ชันใหม่ของการควบคุมอินเทอร์เฟซผู้ใช้ทั่วไปเช่นปุ่มกล่องกาเครื่องหมายและช่องข้อความซึ่งปรับให้สอดคล้องกับแนวคิดการออกแบบวัสดุ

  • รวมถึงคุณสมบัติพิเศษที่ได้รับการปรับปรุงเช่นการ์ดเค้าโครงคอลัมน์ตัวเลื่อนสปินเนอร์แท็บตัวพิมพ์และอื่น ๆ

  • สามารถใช้ได้โดยมีหรือไม่มีไลบรารีหรือสภาพแวดล้อมการพัฒนาใด ๆ

  • ข้ามเบราว์เซอร์และสามารถใช้เพื่อสร้างส่วนประกอบของเว็บที่ใช้ซ้ำได้

การออกแบบที่ตอบสนอง

  • Material Design Lite มีการออกแบบที่ตอบสนองในตัวเพื่อให้เว็บไซต์ที่สร้างโดยใช้ Material Design Lite จะออกแบบตัวเองใหม่ตามขนาดอุปกรณ์

  • คลาส Material Design Lite สร้างขึ้นเพื่อให้เว็บไซต์สามารถพอดีกับขนาดหน้าจอใดก็ได้

  • เว็บไซต์ที่สร้างโดยใช้ Material Design Lite สามารถใช้งานร่วมกับพีซีแท็บเล็ตและอุปกรณ์มือถือได้อย่างสมบูรณ์

CSS มาตรฐาน

  • Material Design Lite ใช้ CSS มาตรฐานเท่านั้นและเรียนรู้ได้ง่ายมาก

  • ไม่มีการพึ่งพาไลบรารี JavaScript ภายนอกใด ๆ เช่น jQuery

  • ExtensibleMaterial Design Lite คือการออกแบบที่เรียบง่ายและเรียบง่าย

  • ได้รับการออกแบบโดยคำนึงถึงความจริงที่ว่าการเพิ่มกฎ CSS ใหม่นั้นง่ายกว่าการเขียนทับกฎ CSS ที่มีอยู่

  • รองรับเงาและสีที่โดดเด่น

  • สีและเฉดสียังคงสม่ำเสมอในแพลตฟอร์มและอุปกรณ์ต่างๆ

และที่สำคัญที่สุด MDL สามารถใช้งานได้ฟรี

มีสองวิธีในการใช้ Material Design Lite -

  • Local Installation - คุณสามารถดาวน์โหลดไฟล์. {primary} - {accent} .min.css และไฟล์ material.min.js ในเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ

  • CDN Based Version - คุณสามารถรวมเนื้อหา. {primary} - {accent} .min.css และไฟล์ material.min.js ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

ทำตามขั้นตอนเหล่านี้สำหรับการติดตั้ง MDL -

  • ไปที่ https://www.getmdl.io/started/index.html เพื่อดาวน์โหลดเวอร์ชันล่าสุดที่มี

  • จากนั้นใส่ไฟล์ material.min.js ไฟล์ในไดเรกทอรีของเว็บไซต์ของคุณเช่น / js และ material.min.css ใน / css.

ตัวอย่าง

ตอนนี้คุณสามารถรวมไฟล์cssและjsในไฟล์ HTML ของคุณได้ดังนี้ -

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "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-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไฟล์ js และ css ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN) storage.googleapis.com ให้เนื้อหาสำหรับเวอร์ชันล่าสุด

เรากำลังใช้ไลบรารี storage.googleapis.com เวอร์ชัน CDN ตลอดบทแนะนำนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ material.css และ material.js จาก Google CDN

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -

ในบทนี้เราจะพูดถึงเค้าโครงต่างๆใน 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>

ผลลัพธ์

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

ตาราง 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>

ผลลัพธ์

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

ส่วนประกอบของแท็บ 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>

ผลลัพธ์

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

ส่วนประกอบส่วนท้ายของ MDL มีสองรูปแบบหลัก: mega-footer และ mini-footer. mega-footer มีเนื้อหาที่ซับซ้อนกว่า mini-footer mega-footer สามารถแสดงเนื้อหาได้หลายส่วนซึ่งคั่นด้วยกฎแนวนอนในขณะที่ส่วนท้ายสั้นจะแสดงเนื้อหาส่วนเดียว โดยทั่วไปส่วนท้ายจะมีทั้งเนื้อหาที่ให้ข้อมูลและคลิกได้เช่นลิงก์

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

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

mdl-mega-footer

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

2

mdl-mega-footer__top-section

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

3

mdl-mega-footer__left-section

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

4

mdl-mega-footer__social-btn

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

5

mdl-mega-footer__right-section

ระบุคอนเทนเนอร์เป็นส่วนที่ถูกต้อง จำเป็นสำหรับองค์ประกอบ div ส่วน "ด้านใน" ด้านขวา

6

mdl-mega-footer__middle-section

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

7

mdl-mega-footer__drop-down-section

ระบุคอนเทนเนอร์เป็นพื้นที่เนื้อหาแบบเลื่อนลง (แนวตั้ง) จำเป็นสำหรับองค์ประกอบ div "ด้านใน" แบบเลื่อนลง

8

mdl-mega-footer__heading

ระบุหัวเรื่องเป็นหัวเรื่องขนาดใหญ่ จำเป็นสำหรับองค์ประกอบ h1 ภายในส่วนแบบเลื่อนลง

9

mdl-mega-footer__link-list

ระบุรายการที่ไม่เรียงลำดับเป็นรายการแบบหล่นลง (แนวตั้ง) จำเป็นสำหรับองค์ประกอบ ul ในส่วนแบบเลื่อนลง

10

mdl-mega-footer__bottom-section

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

11

mdl-logo

ระบุคอนเทนเนอร์เป็นส่วนหัวของสไตล์ จำเป็นสำหรับองค์ประกอบ div "ด้านใน" ในส่วนล่างขนาดใหญ่หรือส่วนท้ายเล็กด้านซ้าย

12

mdl-mini-footer

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

13

mdl-mini-footer__left-section

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

14

mdl-mini-footer__link-list

ระบุรายการที่ไม่เรียงลำดับเป็นรายการแบบอินไลน์ (แนวนอน) จำเป็นสำหรับองค์ประกอบ ul ที่เป็นพี่น้องกับองค์ประกอบ div "mdl-logo"

15

mdl-mini-footer__right-section

ระบุคอนเทนเนอร์เป็นส่วนที่ถูกต้อง จำเป็นสำหรับองค์ประกอบ div ส่วน "ด้านใน" ด้านขวา

16

mdl-mini-footer__social-btn

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

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

ส่วนท้ายของ Mega

ให้เราพูดคุยเกี่ยวกับการใช้ไฟล์ mdl-mega-footerคลาสเพื่อจัดวางเนื้อหาในส่วนท้าย จะใช้คลาส 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-mega-footer - ระบุคอนเทนเนอร์เป็นส่วนประกอบล้านส่วนท้ายของ MDL

  • mdl-mega-footer__top-section - ระบุคอนเทนเนอร์เป็นส่วนบนสุดของส่วนท้าย

  • mdl-mega-footer__left-section - ระบุคอนเทนเนอร์เป็นส่วนด้านซ้าย

  • mdl-mega-footer__social-btn - ระบุสี่เหลี่ยมตกแต่งภายในส่วนท้ายสั้น ๆ

  • mdl-mega-footer__right-section - ระบุคอนเทนเนอร์เป็นส่วนที่ถูกต้อง

  • mdl-mega-footer__middle-section - ระบุคอนเทนเนอร์เป็นส่วนท้ายตรงกลาง

  • mdl-mega-footer__drop-down-section - ระบุคอนเทนเนอร์เป็นพื้นที่เนื้อหาแบบเลื่อนลง (แนวตั้ง)

  • mdl-mega-footer__heading - ระบุหัวเรื่องเป็นหัวเรื่องขนาดใหญ่

  • mdl-mega-footer__link-list - ระบุรายการที่ไม่เรียงลำดับเป็นรายการแบบอินไลน์ (แนวนอน)

  • mdl-mega-footer__bottom-section - ระบุคอนเทนเนอร์เป็นส่วนท้ายด้านล่าง

  • mdl-logo - ระบุคอนเทนเนอร์เป็นส่วนหัวของสไตล์

mdl_megafooter.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">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

ผลลัพธ์

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

มินิส่วนท้าย

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-mini-footer คลาสเพื่อจัดวางเนื้อหาในส่วนท้าย

คลาส 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-mini-footer - ระบุคอนเทนเนอร์เป็นส่วนประกอบส่วนท้ายของ MDL

  • mdl-mini-footer__left-section - ระบุคอนเทนเนอร์เป็นส่วนด้านซ้าย

  • mdl-logo - ระบุคอนเทนเนอร์เป็นส่วนหัวของสไตล์

  • mdl-mini-footer__link-list - ระบุรายการที่ไม่เรียงลำดับเป็นรายการแบบอินไลน์ (แนวนอน)

  • mdl-mini-footer__right-section - ระบุคอนเทนเนอร์เป็นส่วนที่ถูกต้อง

mdl_minifooter.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">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

ผลลัพธ์

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

ส่วนประกอบป้าย 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>

ผลลัพธ์

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

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>

ผลลัพธ์

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

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

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

mdl-card

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

2

mdl-card--border

ใส่เส้นขอบให้กับส่วนการ์ดที่ใช้และใช้กับ div "inner"

3

mdl-shadow--2dp through mdl-shadow--16dp

ตั้งค่าความลึกของเงาที่ผันแปร (2, 3, 4, 6, 8 หรือ 16) ให้กับการ์ดและเป็นทางเลือกโดยใช้ div "ด้านนอก" หากละเว้นจะไม่มีเงาปรากฏ

4

mdl-card__title

ระบุ div เป็นที่เก็บหัวเรื่องการ์ดและจำเป็นสำหรับชื่อ div "inner"

5

mdl-card__title-text

ใส่ลักษณะข้อความที่เหมาะสมให้กับชื่อการ์ดและจำเป็นต้องใช้บน head tag (H1 - H6) ภายใน title div

6

mdl-card__subtitle-text

ใส่ลักษณะข้อความให้กับคำบรรยายการ์ดและเป็นทางเลือก ควรเป็นลูกขององค์ประกอบหัวเรื่อง

7

mdl-card__media

ระบุ div เป็นคอนเทนเนอร์สื่อการ์ดและจำเป็นต้องใช้กับ div สื่อ "inner"

8

mdl-card__supporting-text

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

9

mdl-card__actions

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

ตัวอย่าง

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

mdl_cards.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>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-js-progress

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

2

mdl-progress__indeterminate

ตั้งค่าภาพเคลื่อนไหวเป็นตัวบ่งชี้ความคืบหน้าและเป็นคลาสเสริม

ตัวอย่าง

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

mdl_progressbars.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>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-spinner

ระบุคอนเทนเนอร์เป็นส่วนประกอบสปินเนอร์ MDL และเป็นคลาสที่ต้องการ

2

mdl-js-spinner

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานให้เป็นสปินเนอร์และเป็นคลาสที่จำเป็น

3

is-active

แสดงและทำให้สปินเนอร์เคลื่อนไหวและเป็นทางเลือก

4

mdl-spinner--single-color

ใช้สีเดียวแทนการเปลี่ยนสีและเป็นทางเลือก

ตัวอย่าง

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-spinner คลาสและสปินเนอร์ประเภทต่างๆ

mdl_spinners.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>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-button

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

2

mdl-js-button

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นปุ่มและจำเป็นสำหรับองค์ประกอบปุ่ม

3

mdl-button--icon

ตั้งค่าไอคอนเป็นปุ่มและจำเป็นสำหรับองค์ประกอบปุ่ม

4

material-icons

ระบุสแปนเป็นไอคอนวัสดุและจำเป็นสำหรับองค์ประกอบแบบอินไลน์

5

mdl-menu

ระบุคอนเทนเนอร์รายการที่ไม่ได้เรียงลำดับเป็นส่วนประกอบ MDL และจำเป็นสำหรับองค์ประกอบ ul

6

mdl-js-menu

ตั้งค่าพฤติกรรม MDL พื้นฐานเป็นเมนูและจำเป็นสำหรับองค์ประกอบ ul

7

mdl-menu__item

ระบุปุ่มเป็นตัวเลือกเมนู MDL และตั้งค่าลักษณะการทำงานพื้นฐานของ MDL ซึ่งจำเป็นสำหรับองค์ประกอบรายการ

8

mdl-js-ripple-effect

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

9

mdl-menu--top-left

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

10

(none)

ตามค่าเริ่มต้นเมนูจะอยู่ในตำแหน่งปุ่มด้านล่างจัดชิดขอบด้านซ้ายด้วยปุ่ม

11

mdl-menu--top-right

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

12

mdl-menu--bottom-right

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

ตัวอย่าง

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

mdl_menu.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>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-slider

ระบุองค์ประกอบอินพุตเป็นส่วนประกอบ MDL และจำเป็น

2

mdl-js-slider

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานให้กับองค์ประกอบอินพุตและจำเป็น

ตัวอย่าง

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

mdl_sliders.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">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-checkbox

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

2

mdl-js-checkbox

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นฉลากและจำเป็นสำหรับองค์ประกอบฉลาก

3

mdl-checkbox__input

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นช่องทำเครื่องหมายและจำเป็นสำหรับองค์ประกอบอินพุต (ช่องทำเครื่องหมาย)

4

mdl-checkbox__label

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นคำอธิบายภาพและจำเป็นสำหรับองค์ประกอบช่วง (คำอธิบายภาพ)

5

mdl-js-ripple-effect

ตั้งค่าเอฟเฟกต์การคลิกระลอกและเป็นทางเลือก ไปที่องค์ประกอบป้ายกำกับและไม่อยู่ในองค์ประกอบอินพุต (ช่องทำเครื่องหมาย)

ตัวอย่าง

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

mdl_checkboxes.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">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-radio

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

2

mdl-js-radio

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นฉลากและจำเป็นสำหรับองค์ประกอบฉลาก

3

mdl-radio__button

ตั้งค่าลักษณะการทำงานพื้นฐานของ MDL เป็นวิทยุและจำเป็นสำหรับองค์ประกอบอินพุต (ปุ่มตัวเลือก)

4

mdl-radio__label

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นคำอธิบายภาพและจำเป็นสำหรับองค์ประกอบช่วง (คำอธิบายภาพ)

5

mdl-js-ripple-effect

ตั้งค่าเอฟเฟกต์การคลิกระลอกและเป็นทางเลือก ไปที่องค์ประกอบป้ายกำกับและไม่อยู่ในองค์ประกอบอินพุต (ปุ่มตัวเลือก)

ตัวอย่าง

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

mdl_radio.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">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-icon-toggle

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

2

mdl-js-icon-toggle

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นฉลากและจำเป็นสำหรับองค์ประกอบฉลาก

3

mdl-icon-toggle__input

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นไอคอนสลับและจำเป็นสำหรับองค์ประกอบอินพุต (icon-toggle)

4

mdl-icon-toggle__label

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานให้เป็นคำอธิบายภาพและจำเป็นสำหรับองค์ประกอบ i (ไอคอน)

5

mdl-js-ripple-effect

ตั้งค่าเอฟเฟกต์การคลิกระลอกและเป็นทางเลือก ไปที่องค์ประกอบป้ายกำกับและไม่อยู่ในองค์ประกอบอินพุต (icon-toggle)

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ mdl-icon-toggle คลาสเพื่อแสดงช่องทำเครื่องหมายประเภทต่างๆเป็นไอคอน

mdl_icons.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>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-switch

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

2

mdl-js-switch

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นฉลากและจำเป็นสำหรับองค์ประกอบฉลาก

3

mdl-switch__input

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเพื่อสลับและจำเป็นสำหรับองค์ประกอบอินพุต (สวิตช์)

4

mdl-switch__label

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานให้เป็นคำอธิบายภาพและจำเป็นสำหรับองค์ประกอบอินพุต (คำอธิบายภาพ)

5

mdl-js-ripple-effect

ตั้งค่าเอฟเฟกต์การคลิกระลอกและเป็นทางเลือก ไปที่องค์ประกอบฉลากและไม่อยู่ในองค์ประกอบอินพุต (สวิตช์)

ตัวอย่าง

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้คลาส mdl-switch และช่องทำเครื่องหมายประเภทต่างๆเป็นสวิตช์

mdl_switches.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>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-data-table

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

2

mdl-js-data-table

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นตารางและจำเป็นสำหรับองค์ประกอบตาราง

3

mdl-data-table--selectable

ตั้งค่าพฤติกรรมที่เลือกได้ทั้งหมด / แต่ละรายการ (ช่องทำเครื่องหมาย) และเป็นทางเลือก ไปที่องค์ประกอบของตาราง

4

mdl-data-table__cell--non-numeric

ตั้งค่าการจัดรูปแบบข้อความไปยังเซลล์ข้อมูลและเป็นทางเลือก ไปที่ทั้งส่วนหัวตารางและเซลล์ข้อมูลตาราง

5

(none)

โดยค่าเริ่มต้นตั้งค่าการจัดรูปแบบตัวเลขเป็นส่วนหัวหรือเซลล์ข้อมูล

ตัวอย่าง

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

mdl_data_tables.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 class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-textfield

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

2

mdl-js-textfield

ตั้งค่าลักษณะการทำงานของ MDL พื้นฐานเป็นอินพุตและจำเป็นสำหรับองค์ประกอบ div "ด้านนอก"

3

mdl-textfield__input

ระบุองค์ประกอบเป็นอินพุตฟิลด์ข้อความและจำเป็นสำหรับองค์ประกอบอินพุตหรือพื้นที่ข้อความ

4

mdl-textfield__label

ระบุองค์ประกอบเป็นป้ายกำกับฟิลด์ข้อความและจำเป็นสำหรับองค์ประกอบป้ายกำกับสำหรับองค์ประกอบอินพุตหรือพื้นที่ข้อความ

5

mdl-textfield--floating-label

ใช้เอฟเฟกต์ฉลากลอยและเป็นทางเลือก ไปที่องค์ประกอบ div "ด้านนอก"

6

mdl-textfield__error

ระบุช่วงเป็นข้อความแสดงข้อผิดพลาด MDL และเป็นทางเลือก ไปที่องค์ประกอบช่วงสำหรับองค์ประกอบอินพุต MDL ที่มีรูปแบบ

7

mdl-textfield--expandable

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

8

mdl-button

ระบุฉลากเป็นปุ่มไอคอน MDL ใช้สำหรับช่องป้อนข้อมูลที่ขยายได้และจำเป็นสำหรับองค์ประกอบฉลากของ div "ด้านนอก"

9

mdl-js-button

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

10

mdl-button--icon

ระบุฉลากเป็นคอนเทนเนอร์ไอคอน MDL ใช้สำหรับช่องป้อนข้อมูลที่ขยายได้และจำเป็นสำหรับองค์ประกอบฉลากของ div "ด้านนอก"

11

mdl-input__expandable-holder

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

12

is-invalid

ระบุฟิลด์ข้อความว่าไม่ถูกต้องในการโหลดครั้งแรกและเป็นทางเลือกบนองค์ประกอบ mdl-textfield

ตัวอย่าง

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

mdl_textfields.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">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

ผลลัพธ์

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

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

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

mdl-tooltip

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

2

mdl-tooltip--large

ตั้งค่าเอฟเฟกต์แบบอักษรขนาดใหญ่และเป็นทางเลือก ไปที่องค์ประกอบคอนเทนเนอร์คำแนะนำเครื่องมือ

ตัวอย่าง

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้ไฟล์ mdl-tooltip คลาสเพื่อแสดงคำแนะนำเครื่องมือประเภทต่างๆ

mdl_tooltips.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">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

ผลลัพธ์

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