सामग्री डिजाइन लाइट - लेआउट

इस अध्याय में, हम सामग्री डिज़ाइन लाइट में विभिन्न लेआउट पर चर्चा करेंगे। HTML5 में निम्नलिखित कंटेनर तत्व हैं -

• <div> - HTML सामग्री के लिए एक सामान्य कंटेनर प्रदान करता है।

• <header> - शीर्ष लेख अनुभाग का प्रतिनिधित्व करता है।

• <footer> - पाद लेख अनुभाग का प्रतिनिधित्व करता है।

• <article> - लेख का प्रतिनिधित्व करता है।

• <section> - विभिन्न प्रकार के वर्गों के लिए एक सामान्य कंटेनर प्रदान करता है।

एमडीएल कंटेनरों को विभिन्न पूर्वनिर्धारित दृश्य और व्यवहारिक वृद्धि को लागू करने के लिए विभिन्न सीएसएस कक्षाएं प्रदान करता है। निम्न तालिका उपलब्ध वर्गों और उनके प्रभावों को सूचीबद्ध करती है।

अनु क्रमांक।	कक्षा का नाम और विवरण
1	mdl-layout एक एमडीएल घटक के रूप में एक कंटेनर की पहचान करता है। बाहरी कंटेनर तत्व पर आवश्यक।
2	mdl-js-layout लेआउट के लिए बुनियादी एमडीएल व्यवहार जोड़ता है। बाहरी कंटेनर तत्व पर आवश्यक।
3	mdl-layout__header एक एमडीएल घटक के रूप में कंटेनर की पहचान करता है। शीर्ष लेख तत्व पर आवश्यक।
4	mdl-layout-icon एक एप्लिकेशन आइकन जोड़ने के लिए उपयोग किया जाता है। यदि दोनों दिखाई दे रहे हैं तो मेनू आइकन द्वारा ओवरराइड हो जाता है। वैकल्पिक आइकन तत्व।
5	mdl-layout__header-row एमडीएल हेडर पंक्ति के रूप में कंटेनर की पहचान करता है। हेडर कंटेंट कंटेनर पर आवश्यक है।
6	mdl-layout__title लेआउट शीर्षक पाठ की पहचान करता है। लेआउट शीर्षक कंटेनर पर आवश्यक।
7	mdl-layout-spacer एक हेडर या दराज के अंदर तत्वों को संरेखित करने के लिए उपयोग किया जाता है। यह शेष स्थान को भरने के लिए बढ़ता है। आमतौर पर तत्वों को दाईं ओर संरेखित करने के लिए उपयोग किया जाता है। लेआउट लेआउट के बाद div पर वैकल्पिक।
8	mdl-navigation एमडीएल नेविगेशन समूह के रूप में कंटेनर की पहचान करता है। नौसेना तत्व पर आवश्यक।
9	mdl-navigation__link लंगर को एमडीएल नेविगेशन लिंक के रूप में पहचानता है। हेडर और / या दराज एंकर तत्वों पर आवश्यक।
10	mdl-layout__drawer एमडीएल लेआउट दराज के रूप में कंटेनर की पहचान करता है। दराज कंटेनर तत्व पर आवश्यक।
1 1	mdl-layout__content एमडीएल लेआउट सामग्री के रूप में कंटेनर की पहचान करता है। मुख्य तत्व पर आवश्यक।
12	mdl-layout__header--scroll हेडर स्क्रॉल को सामग्री के साथ बनाता है। हेडर तत्व पर वैकल्पिक।
13	mdl-layout--fixed-drawer दराज हमेशा बड़ी स्क्रीन में दिखाई और खुलती है। बाहरी कंटेनर तत्व पर वैकल्पिक और दराज कंटेनर तत्व पर नहीं।
14	mdl-layout--fixed-header हेडर हमेशा छोटे स्क्रीन में भी दिखाई देता है। बाहरी कंटेनर तत्व पर वैकल्पिक।
15	mdl-layout--large-screen-only छोटे स्क्रीन पर एक तत्व छुपाता है। एमडीएल-लेआउट के किसी भी वंशज पर वैकल्पिक।
16	mdl-layout--small-screen-only एक तत्व को बड़ी स्क्रीन पर छिपाता है। एमडीएल-लेआउट के किसी भी वंशज पर वैकल्पिक।
17	mdl-layout__header--waterfall कई हेडर लाइनों के साथ "झरना" प्रभाव की अनुमति देता है। हेडर तत्व पर वैकल्पिक।
18	mdl-layout__header--transparent हेडर को पारदर्शी बनाता है और लेआउट पृष्ठभूमि के शीर्ष पर खींचता है। हेडर तत्व पर वैकल्पिक।
19	mdl-layout__header--seamed एक छाया के बिना हेडर का उपयोग करता है। हेडर तत्व पर वैकल्पिक।
20	mdl-layout__tab-bar एक एमडीएल टैब बार के रूप में कंटेनर की पहचान करता है। हेडर (टैब्ड लेआउट) के अंदर कंटेनर तत्व पर आवश्यक।
21	mdl-layout__tab लंगर को एमडीएल टैब लिंक के रूप में पहचानता है। टैब बार एंकर तत्वों पर आवश्यक।
22	is-active टैब को डिफ़ॉल्ट सक्रिय टैब के रूप में पहचानता है। टैब बार एंकर तत्व और संबद्ध टैब अनुभाग तत्व पर वैकल्पिक।
23	mdl-layout__tab-panel कंटेनर को टैब सामग्री पैनल के रूप में पहचानता है। टैब अनुभाग तत्वों पर आवश्यक।
24	mdl-layout--fixed-tabs डिफ़ॉल्ट स्क्रॉल करने योग्य टैब के बजाय निश्चित टैब का उपयोग करता है। बाहरी कंटेनर तत्व पर वैकल्पिक, हेडर के अंदर कंटेनर नहीं।

निम्नलिखित उदाहरण विभिन्न कंटेनरों को स्टाइल करने के लिए mdl- लेआउट वर्ग का उपयोग दिखाते हैं।

नियत दराज

निश्चित दराज के साथ एक टेम्पलेट बनाने के लिए, लेकिन कोई हेडर नहीं, निम्नलिखित एमडीएल वर्गों का उपयोग किया जाता है।

• mdl-layout - एमडीएल घटक के रूप में एक div की पहचान करता है।

• mdl-js-layout - बाहरी div में बुनियादी एमडीएल व्यवहार जोड़ता है।

• mdl-layout--fixed-drawer - दराज हमेशा बड़ी स्क्रीन में दिखाई देती है और खुलती है।

• mdl-layout__drawer - एमडीएल लेआउट दराज के रूप में div की पहचान करता है।

• mdl-layout-title - लेआउट शीर्षक पाठ की पहचान करता है।

• mdl-navigation - एमडीएल नेविगेशन समूह के रूप में div की पहचान करता है।

• mdl-navigation__link - MDL नेविगेशन लिंक के रूप में एंकर को पहचानता है।

• mdl-layout__content - एमडीएल लेआउट सामग्री के रूप में div की पहचान करता है।

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-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-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-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-layout__tab-bar - एक एमडीएल टैब बार के रूप में कंटेनर की पहचान करता है।

• 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>

परिणाम

परिणाम सत्यापित करें।