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>ผลลัพธ์
ตรวจสอบผลลัพธ์