Material Design Lite - เลย์เอาต์
ในบทนี้เราจะพูดถึงเค้าโครงต่างๆใน Material Design Lite HTML5 มีองค์ประกอบคอนเทนเนอร์ดังต่อไปนี้ -
<div> - จัดเตรียมคอนเทนเนอร์ทั่วไปสำหรับเนื้อหา HTML
<header> - แสดงถึงส่วนหัว
<footer> - แสดงถึงส่วนท้าย
<article> - แสดงถึงบทความ
<section> - จัดเตรียมคอนเทนเนอร์ทั่วไปสำหรับส่วนประเภทต่างๆ
MDL มีคลาส CSS ที่หลากหลายเพื่อใช้การปรับปรุงภาพและพฤติกรรมที่กำหนดไว้ล่วงหน้าต่างๆกับคอนเทนเนอร์ ตารางต่อไปนี้แสดงรายการคลาสที่มีและเอฟเฟกต์
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | mdl-layout ระบุคอนเทนเนอร์เป็นส่วนประกอบ MDL จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายนอก |
| 2 | mdl-js-layout เพิ่มพฤติกรรม MDL พื้นฐานในเค้าโครง จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายนอก |
| 3 | mdl-layout__header ระบุคอนเทนเนอร์เป็นส่วนประกอบ MDL จำเป็นสำหรับองค์ประกอบส่วนหัว |
| 4 | mdl-layout-icon ใช้เพื่อเพิ่มไอคอนแอปพลิเคชัน ถูกแทนที่ด้วยไอคอนเมนูหากมองเห็นทั้งสองอย่าง องค์ประกอบไอคอนเสริม |
| 5 | mdl-layout__header-row ระบุคอนเทนเนอร์เป็นแถวส่วนหัวของ MDL จำเป็นบนคอนเทนเนอร์เนื้อหาส่วนหัว |
| 6 | mdl-layout__title ระบุข้อความหัวเรื่องเค้าโครง จำเป็นสำหรับคอนเทนเนอร์หัวเรื่องเค้าโครง |
| 7 | mdl-layout-spacer ใช้เพื่อจัดแนวองค์ประกอบภายในส่วนหัวหรือลิ้นชัก มันเติบโตขึ้นเพื่อเติมเต็มพื้นที่ที่เหลือ นิยมใช้สำหรับจัดแนวองค์ประกอบไปทางขวา ไม่บังคับสำหรับ div ตามชื่อเค้าโครง |
| 8 | mdl-navigation ระบุคอนเทนเนอร์เป็นกลุ่มการนำทาง MDL จำเป็นสำหรับองค์ประกอบ nav |
| 9 | mdl-navigation__link ระบุจุดยึดเป็นลิงก์การนำทาง MDL จำเป็นสำหรับองค์ประกอบส่วนหัวและ / หรือส่วนยึดลิ้นชัก |
| 10 | mdl-layout__drawer ระบุคอนเทนเนอร์เป็นลิ้นชักเค้าโครง MDL จำเป็นสำหรับองค์ประกอบตู้ลิ้นชัก |
| 11 | mdl-layout__content ระบุคอนเทนเนอร์เป็นเนื้อหาโครงร่าง MDL จำเป็นสำหรับองค์ประกอบหลัก |
| 12 | mdl-layout__header--scroll ทำให้ส่วนหัวเลื่อนไปพร้อมกับเนื้อหา ไม่บังคับสำหรับองค์ประกอบส่วนหัว |
| 13 | mdl-layout--fixed-drawer ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่ เป็นทางเลือกสำหรับองค์ประกอบคอนเทนเนอร์ด้านนอกและไม่อยู่ในองค์ประกอบคอนเทนเนอร์ลิ้นชัก |
| 14 | mdl-layout--fixed-header ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก ไม่บังคับสำหรับองค์ประกอบคอนเทนเนอร์ด้านนอก |
| 15 | mdl-layout--large-screen-only ซ่อนองค์ประกอบบนหน้าจอขนาดเล็ก ไม่บังคับสำหรับลูกหลานของ mdl-layout |
| 16 | mdl-layout--small-screen-only ซ่อนองค์ประกอบบนหน้าจอขนาดใหญ่ ไม่บังคับสำหรับลูกหลานของ mdl-layout |
| 17 | mdl-layout__header--waterfall อนุญาตเอฟเฟกต์ "น้ำตก" ที่มีบรรทัดส่วนหัวหลายบรรทัด ไม่บังคับสำหรับองค์ประกอบส่วนหัว |
| 18 | mdl-layout__header--transparent ทำให้ส่วนหัวโปร่งใสและดึงด้านบนของพื้นหลังเค้าโครง ไม่บังคับสำหรับองค์ประกอบส่วนหัว |
| 19 | mdl-layout__header--seamed ใช้ส่วนหัวที่ไม่มีเงา ไม่บังคับสำหรับองค์ประกอบส่วนหัว |
| 20 | mdl-layout__tab-bar ระบุคอนเทนเนอร์เป็นแถบแท็บ MDL จำเป็นสำหรับองค์ประกอบคอนเทนเนอร์ภายในส่วนหัว (เค้าโครงแบบแท็บ) |
| 21 | mdl-layout__tab ระบุจุดยึดเป็นลิงก์แท็บ MDL จำเป็นสำหรับองค์ประกอบจุดยึดแถบแท็บ |
| 22 | is-active ระบุแท็บเป็นแท็บเริ่มต้นที่ใช้งานอยู่ ไม่บังคับสำหรับองค์ประกอบจุดยึดแถบแท็บและองค์ประกอบส่วนแท็บที่เกี่ยวข้อง |
| 23 | mdl-layout__tab-panel ระบุคอนเทนเนอร์เป็นแผงเนื้อหาแท็บ จำเป็นสำหรับองค์ประกอบส่วนแท็บ |
| 24 | mdl-layout--fixed-tabs ใช้แท็บคงที่แทนแท็บเริ่มต้นที่เลื่อนได้ ไม่บังคับสำหรับองค์ประกอบคอนเทนเนอร์ภายนอกไม่ใช่คอนเทนเนอร์ภายในส่วนหัว |
ตัวอย่างต่อไปนี้แสดงการใช้คลาส mdl-layout เพื่อจัดสไตล์คอนเทนเนอร์ต่างๆ
ลิ้นชักคงที่
ในการสร้างเทมเพลตที่มีลิ้นชักคงที่ แต่ไม่มีส่วนหัวจะใช้คลาส MDL ต่อไปนี้
mdl-layout - ระบุ div เป็นส่วนประกอบ MDL
mdl-js-layout - เพิ่มพฤติกรรม MDL พื้นฐานให้กับ div ภายนอก
mdl-layout--fixed-drawer - ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่
mdl-layout__drawer - ระบุ div เป็นลิ้นชักเค้าโครง MDL
mdl-layout-title - ระบุข้อความหัวเรื่องเค้าโครง
mdl-navigation - ระบุ div เป็นกลุ่มการนำทาง MDL
mdl-navigation__link - ระบุจุดยึดเป็นลิงค์นำทาง MDL
mdl-layout__content - ระบุ div เป็นเนื้อหาเค้าโครง MDL
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
ส่วนหัวคงที่
ในการสร้างเทมเพลตที่มีส่วนหัวคงที่หลังจากใช้คลาส MDL เพิ่มเติม
mdl-layout--fixed-header - ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
ส่วนหัวและลิ้นชักคงที่
ในการสร้างเทมเพลตที่มีส่วนหัวคงที่และลิ้นชักคงที่จะใช้คลาส MDL เพิ่มเติมต่อไปนี้
mdl-layout--fixed-drawer - ทำให้ลิ้นชักสามารถมองเห็นและเปิดได้เสมอในหน้าจอขนาดใหญ่
mdl-layout--fixed-header - ทำให้ส่วนหัวมองเห็นได้เสมอแม้ในหน้าจอขนาดเล็ก
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
เลื่อนส่วนหัว
ในการสร้างเทมเพลตที่มีส่วนหัวแบบเลื่อนจะใช้คลาส MDL ต่อไปนี้
mdl-layout--header--scroll - ทำให้ส่วนหัวเลื่อนไปพร้อมกับเนื้อหา
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
ส่วนหัวของสัญญา
ในการสร้างเทมเพลตที่มีส่วนหัวที่ทำสัญญาเมื่อเลื่อนหน้าลงจะใช้คลาส MDL ต่อไปนี้
mdl-layout__header--waterfall - อนุญาตเอฟเฟกต์ "น้ำตก" ที่มีส่วนหัวหลายบรรทัด
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
แก้ไขส่วนหัวด้วยแท็บที่เลื่อนได้
ในการสร้างเทมเพลตที่มีส่วนหัวที่มีแท็บแบบเลื่อนได้จะใช้คลาส MDL ต่อไปนี้
mdl-layout__tab-bar - ระบุคอนเทนเนอร์เป็นแถบแท็บ MDL
mdl-layout__tab - ระบุจุดยึดเป็นลิงก์แท็บ MDL
mdl-layout__tab-panel - ระบุคอนเทนเนอร์เป็นแผงเนื้อหาแท็บ
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
แก้ไขส่วนหัวด้วยแท็บคงที่
ในการสร้างเทมเพลตที่มีส่วนหัวที่มีแท็บคงที่จะใช้คลาส MDL เพิ่มเติมต่อไปนี้
mdl-layout--fixed-tabs - ใช้แท็บคงที่แทนแท็บเริ่มต้นที่เลื่อนได้
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์