मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. Google के इंजीनियरों और यूएक्स डिज़ाइनरों की टीम ने MDC बनाया है. इसमें कई सुंदर और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है. material.io/develop |
MDC-101 कोडलैब में, आपने लॉगिन पेज का यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, दो मटीरियल कॉम्पोनेंट (एमडीसी) का इस्तेमाल किया था: टेक्स्ट फ़ील्ड और बटन. अब इसमें नेविगेशन, स्ट्रक्चर, और डेटा जोड़कर इसे और बेहतर बनाते हैं.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको Shrine नाम के ऐप्लिकेशन के लिए होम पेज बनाना है. यह एक ई-कॉमर्स ऐप्लिकेशन है, जो कपड़े और घरेलू सामान बेचता है. इसमें ये चीज़ें शामिल होंगी:
- नेविगेशन पैनल
- प्रॉडक्ट से भरी इमेज की सूची
इस कोडलैब में MDC Web कॉम्पोनेंट
- ड्रॉवर
- चित्र सूची
आपको इन चीज़ों की ज़रूरत होगी
- Node.js का नया वर्शन. यह npm के साथ बंडल किया गया है. npm, JavaScript पैकेज मैनेजर है.
- सैंपल कोड (अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
वेब डेवलपमेंट के अपने अनुभव को आप क्या रेटिंग देंगे?
क्या आपको MDC-101 से आगे बढ़ना है?
अगर आपने MDC-101 पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. सीधे तीसरे चरण पर जाएं: नेविगेशन ड्रॉअर जोड़ें.
स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन, material-components-web-codelabs-master/mdc-102/starter डायरेक्ट्री में मौजूद होता है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.
...या इसे GitHub से क्लोन करें
इस कोडलैब को GitHub से क्लोन करने के लिए, ये कमांड चलाएं:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करना
आपकी मौजूदा डायरेक्ट्री material-components-web-codelabs/mdc-102/starter. होनी चाहिए. इसके बाद, यह कमांड चलाएं:
npm install
जब टर्मिनल पर काफ़ी गतिविधि दिखने लगे, तब आपको 'सॉफ़्टवेयर इंस्टॉल हो गया' मैसेज दिखेगा:
स्टार्टर ऐप्लिकेशन चलाना
उसी डायरेक्ट्री में, यह कमांड चलाएं:
npm start
webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.
हो गया! आपको MDC-101 कोडलैब से Shrine का लॉगिन पेज दिखेगा.
अब जब लॉगिन पेज अच्छा दिख रहा है, तो आइए ऐप्लिकेशन में कुछ प्रॉडक्ट जोड़ें. मान्य उपयोगकर्ता नाम और पासवर्ड डालें. इसके बाद, होम पेज पर जाने के लिए "आगे बढ़ें" बटन पर क्लिक करें.
जब उपयोगकर्ता साइन इन करता है, तो उसे एक होम पेज दिखता है. इस पर लिखा होता है, "आपने कर दिखाया!" बहुत बढ़िया! हालांकि, अब हमारे उपयोगकर्ता को कार्रवाई करने के लिए कुछ विकल्प चाहिए. साथ ही, उसे यह भी पता होना चाहिए कि वह ऐप्लिकेशन में कहां है. इसके लिए, हम नेविगेशन जोड़ते हैं.
मटीरियल डिज़ाइन के नेविगेशन पैटर्न, इस्तेमाल करने में बहुत आसान होते हैं. Material नेविगेशन पैनल, नेविगेशन और अन्य कार्रवाइयों को तुरंत ऐक्सेस करने की सुविधा देता है. आइये एक दिनांक सीमा नियंत्रण जोड़ें.
MDC Drawer और List इंस्टॉल करना
ड्रॉर कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
npm install @material/drawer @material/list
एचटीएमएल जोड़ना
home.html में, "आपने यह कर लिया!" को दराज और उसके आइटम के लिए, इस मार्कअप से बदलें:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>सीएसएस जोड़ना
home.scss में, मौजूदा इंपोर्ट के बाद यहां दिए गए इंपोर्ट स्टेटमेंट जोड़ें:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";home.scss में सबसे नीचे, ये स्टाइल जोड़ें:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}JavaScript जोड़ना
कीबोर्ड से सही तरीके से नेविगेट करने के लिए, हमें नेविगेशन ड्रॉअर में MDC List को इंस्टैंशिएट करना होगा. home.js खोलें. फ़िलहाल, यह खाली है. इसमें यह कोड जोड़ें:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));http://localhost:8080/home.html पर जाकर, पेज को रीफ़्रेश करें. अब आपका होम पेज ऐसा दिखना चाहिए:
अब होम पेज पर, परसिस्टेंट नेविगेशन ड्रॉअर है. इसमें अलग-अलग नेविगेशन आइटम दिखते हैं. इनमें से पहला आइटम चालू होता है.
अब हमारे ऐप्लिकेशन का स्ट्रक्चर तैयार हो गया है. इसलिए, कॉन्टेंट को इमेज लिस्ट में रखकर व्यवस्थित करते हैं.
MDC Image List इंस्टॉल करना
इमेज लिस्ट कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
npm install @material/image-list
एक आइटम वाली सूची के लिए एचटीएमएल जोड़ना
चलिए, नेविगेशन ड्रॉअर के बगल में इमेज की सूची जोड़ते हैं. हम सूची में एक आइटम जोड़कर शुरुआत करेंगे. इसमें एक इमेज और एक टेक्स्ट लेबल शामिल होगा.
home.html में, <aside> एलिमेंट के आखिर में यह एचटीएमएल जोड़ें:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>इस सूची में एक और क्लास, product-list शामिल है. यह क्लास, इस ट्यूटोरियल और MDC-103, दोनों में कस्टम स्टाइल लागू करेगी.
सीएसएस जोड़ना
सबसे पहले, home.scss में, मौजूदा इंपोर्ट के बाद इमेज लिस्ट कॉम्पोनेंट के स्टाइल के लिए इंपोर्ट जोड़ें:
@import "@material/image-list/mdc-image-list";इसके बाद, होम पेज की शुरुआती स्टाइल के बाद ये स्टाइल जोड़ें:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}इन स्टाइल से, इमेज की सूची को चार कॉलम में इमेज दिखाने का निर्देश मिलता है. इससे यह पक्का होता है कि इमेज की सूची, ड्रॉअर से अलग स्क्रोल हो.
पेज रीफ़्रेश करें. अब होम पेज ऐसा दिखना चाहिए:
इमेज की सूची का इस्तेमाल, किसी कलेक्शन में कई इमेज दिखाने के लिए किया जाता है. इसलिए, कॉम्पोनेंट के काम करने के तरीके को बेहतर तरीके से समझने के लिए, इसमें कुछ और इमेज जोड़ते हैं.
home.html में, मौजूदा <li> एलिमेंट को कॉपी करें:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>इसके बाद, इसे मौजूदा आइटम के बाद (बंद होने वाले </ul> टैग से पहले) 15 बार चिपकाएं. इससे कुल 16 इमेज जनरेट होंगी. अभी यूनीक इमेज और टाइटल के बारे में चिंता न करें. आपको इनके बारे में MDC-103 में जानकारी मिलेगी.
रीफ्रेश करें पर टैप करें. अब होम पेज ऐसा दिखना चाहिए:
इमेज की सूची में हर लाइन में चार इमेज दिखती हैं. साथ ही, इमेज का साइज़, स्क्रीन पर उपलब्ध जगह के हिसाब से अपने-आप बदल जाता है.
आपकी साइट पर बुनियादी फ़्लो मौजूद है. इससे खरीदार, साइन इन पेज से होम पेज पर जा सकता है. होम पेज पर प्रॉडक्ट देखे जा सकते हैं. आपने कोड की कुछ ही लाइनों में, कॉन्टेंट दिखाने के लिए एक ड्रॉअर और इमेज की सूची जोड़ी है. होम पेज पर अब बुनियादी स्ट्रक्चर और कॉन्टेंट मौजूद है.
अगले चरण
ड्रॉअर और इमेज लिस्ट का इस्तेमाल करके, अब आपने MDC Web लाइब्रेरी के दो और Material Design कोर कॉम्पोनेंट इस्तेमाल कर लिए हैं! MDC Web Catalog पर जाकर, ज़्यादा कॉम्पोनेंट देखे जा सकते हैं.
यह पूरी तरह से काम कर रहा है. हालांकि, होम पेज पर अब तक किसी ब्रैंड या नज़रिए के बारे में नहीं बताया गया है. MDC-103: Material Design Theming with Color, Shape, Elevation and Type में, आपको इन कॉम्पोनेंट की स्टाइल को पसंद के मुताबिक बनाने का तरीका बताया जाएगा. इससे आपको अपने ब्रैंड को मॉडर्न और आकर्षक लुक देने में मदद मिलेगी.