मटीरियल कॉम्पोनेंट (एमडीसी) डेवलपर को मटीरियल डिज़ाइन लागू करने में मदद करता है. Google के इंजीनियर और UX डिज़ाइनर की टीम ने, MDC में दर्जनों खूबसूरत और फ़ंक्शनल यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बनाए हैं. यह Android, iOS, वेब, और Fluter के लिए उपलब्ध है. material.io/develop |
कोडलैब MDC-101 में, आपने लॉगिन पेज यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, दो मटीरियल कॉम्पोनेंट (एमडीसी) का इस्तेमाल किया: टेक्स्ट फ़ील्ड और बटन. अब नेविगेशन, स्ट्रक्चर, और डेटा जोड़कर इसे बड़ा और आसान बनाएं.
आप क्या बनाते हैं
इस कोडलैब में, आप #39;श्रिन" नाम का एक ऐप्लिकेशन बना सकते हैं. यह एक ई-कॉमर्स ऐप्लिकेशन है, जो कपड़े और घर का सामान बेचता है. इसमें ये चीज़ें शामिल होंगी:
- नेविगेशन पैनल
- प्रॉडक्ट की पूरी इमेज सूची
इस कोडलैब में MDC वेब कॉम्पोनेंट
- ड्रॉवर
- चित्र सूची
आपको क्या चाहिए
- Node.js का हाल ही का वर्शन (जो JavaScript पैकेज मैनेजर npm के साथ आता है).
- सैंपल कोड (अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, और 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 कोडलैब से मठ का लॉगिन पेज दिखेगा.
अब लॉगिन पेज अच्छा लग रहा है, इसलिए ऐप्लिकेशन को कुछ प्रॉडक्ट से पॉप्युलेट करें. एक मान्य उपयोगकर्ता नाम और पासवर्ड डालें. इसके बाद, होम पेज पर जाने के लिए &कोटेशन;आगे बढ़ें&बटन पर क्लिक करें.
जब उपयोगकर्ता साइन इन करते हैं, तो एक होम पेज दिखता है जिस पर लिखा है, &कोटेशन;आपने कर लिया!&कोटेशन; बहुत बढ़िया! अब उपयोगकर्ता को इस बारे में पता करना होगा कि वे ऐप्लिकेशन में कहां हैं. इस बारे में मदद पाने के लिए, उन्हें नेविगेशन जोड़ें.
मटीरियल डिज़ाइन नेविगेशन पैटर्न काफ़ी ज़्यादा इस्तेमाल किए जाते हैं. मटीरियल नेविगेशन पैनल, नेविगेशन और अन्य कार्रवाइयों को तुरंत ऐक्सेस करने की सुविधा देता है. आइये एक दिनांक सीमा नियंत्रण जोड़ें.
एमडीसी दराज और सूची इंस्टॉल करना
पैनल के कॉम्पोनेंट के पैकेज इंस्टॉल करने के लिए, यह काम करें:
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 सूची को इंस्टैंशिएट करना होगा. home.js खोलें, जो फ़िलहाल खाली है और यह कोड जोड़ें:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));http://localhost:8080/home.html पर पेज को रीफ़्रेश करें. आपका होम पेज अब कुछ ऐसा दिखना चाहिए:
अब होम पेज में एक ऐसा नेविगेशन पैनल है जो लगातार नेविगेशन आइटम दिखाता है. साथ ही, पहला आइटम चालू है.
अब हमारे ऐप्लिकेशन के पास कुछ स्ट्रक्चर है, इसलिए इस कॉन्टेंट को इमेज की सूची में रखकर, इसे व्यवस्थित करें.
एमडीसी इमेज सूची इंस्टॉल करें
इमेज की सूची वाले कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए:
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 वेब लाइब्रेरी के दो और मटीरियल डिज़ाइन कोर कॉम्पोनेंट का इस्तेमाल कर चुके हैं! ज़्यादा जानकारी के लिए एमडीसी वेब कैटलॉग पर जाएं.
हालांकि, यह पूरी तरह से काम करता है, लेकिन होम पेज पर किसी खास ब्रैंड या व्यू की बात ज़ाहिर नहीं की जाती. MDC-103: कलर, आकार, एलिवेशन, और टाइप की मदद से मटीरियल डिज़ाइन थीम में आप #39; इन कॉम्पोनेंट की शैली को पसंद के मुताबिक बनाएंगे, ताकि इनमें आकर्षक और आधुनिक ब्रैंड दिखने लगे.