मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. Google के इंजीनियरों और यूएक्स डिज़ाइनरों की टीम ने MDC बनाया है. इसमें कई सुंदर और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है. material.io/develop |
MDC-101 और MDC-102 कोडलैब में, आपने Material Components (MDC) का इस्तेमाल करके, Shrine नाम के ऐप्लिकेशन की बुनियादी सुविधाएं बनाई थीं. यह एक ई-कॉमर्स ऐप्लिकेशन है, जो कपड़े और घर के सामान बेचता है. इस ऐप्लिकेशन में उपयोगकर्ता का फ़्लो, लॉग इन स्क्रीन से शुरू होता है. इसके बाद, उपयोगकर्ता को होम स्क्रीन पर ले जाया जाता है, जहाँ प्रॉडक्ट मौजूद होते हैं.
हाल ही में, Material Design को और बेहतर बनाया गया है, ताकि डिज़ाइनर और डेवलपर अपने प्रॉडक्ट के ब्रैंड को ज़्यादा आसानी से दिखा सकें. इस कोड लैब में, MDC का इस्तेमाल करके Shrine ऐप्लिकेशन को पसंद के मुताबिक बनाया जाएगा. इससे, ब्रैंड की यूनीक स्टाइल को पहले से ज़्यादा तरीकों से दिखाया जा सकेगा.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, Shrine को उसके ब्रैंड के हिसाब से पसंद के मुताबिक बनाया जाएगा. इसके लिए, इन चीज़ों का इस्तेमाल किया जाएगा:
- रंग
- मुद्रण कला
- ऊंचाई
- आकार
- लेआउट
इस कोडलैब में इस्तेमाल किए गए MDC Web कॉम्पोनेंट और सबसिस्टम
- थीम
- मुद्रण कला
- ऊंचाई
- चित्र सूची
आपको इन चीज़ों की ज़रूरत होगी
- Node.js का नया वर्शन. यह npm के साथ बंडल किया गया है. npm, JavaScript पैकेज मैनेजर है.
- सैंपल कोड (अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
वेब डेवलपमेंट के अपने अनुभव को आप क्या रेटिंग देंगे?
क्या आपको MDC-102 से आगे बढ़ना है?
अगर आपने MDC-102 कोडलैब पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. तीसरे चरण पर जाएं: रंग बदलना.
स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन, material-components-web-codelabs-master/mdc-103/starter डायरेक्ट्री में मौजूद होता है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.
...या इसे GitHub से क्लोन करें
इस कोडलैब को GitHub से क्लोन करने के लिए, ये कमांड चलाएं:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करना
स्टार्टर डायरेक्ट्री material-components-web-codelabs/mdc-103/starter से (अगर आपने ऊपर दिया गया तरीका अपनाया है, तो यह आपकी मौजूदा डायरेक्ट्री होनी चाहिए), यह कमांड चलाएं:
npm install
आपको कई गतिविधियां दिखेंगी. आखिर में, आपके टर्मिनल पर यह मैसेज दिखेगा कि इंस्टॉल हो गया है:
स्टार्टर ऐप्लिकेशन चलाना
उसी डायरेक्ट्री में जाकर, यह कमांड चलाएं:
npm start
webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.
हो गया! आपको अपने ब्राउज़र में Shrine का लॉगिन पेज दिखेगा. उपयोगकर्ता नाम और पासवर्ड डालें. इसके बाद, होम पेज पर जाने के लिए "आगे बढ़ें" बटन पर क्लिक करें. इसमें बाईं ओर नेविगेशन ड्रॉअर दिखना चाहिए. इसके बगल में, प्रॉडक्ट की इमेज का ग्रिड दिखना चाहिए.
नेविगेशन ड्रॉअर काम कर रहा है. अब हम इसका रंग, एलिवेशन, और टाइपोग्राफ़ी बदलकर इसे Shrine ब्रैंड के हिसाब से बनाते हैं.
इस कलर थीम को एक डिज़ाइनर ने बनाया है. इसमें कस्टम कलर का इस्तेमाल किया गया है. ये कलर नीचे दी गई इमेज में दिखाए गए हैं. इसमें ऐसे रंग शामिल हैं जिन्हें Shrine के ब्रैंड से चुना गया है. साथ ही, इन्हें Material Theme Editor पर लागू किया गया है. Material Theme Editor ने इन्हें बड़ा करके, पूरा पैलेट बनाया है. (ये रंग, 2014 के मटीरियल कलर पैलेट के नहीं हैं.)
आइए, Shrine ऐप्लिकेशन के नेविगेशन ड्रॉअर का रंग बदलकर, उसे कलर स्कीम के हिसाब से सेट करें.
थीम के रंगों को बदलना
_variables.scss नाम की एक नई फ़ाइल बनाएं. इसमें यह कॉन्टेंट शामिल करें:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;इसके बाद, इसे _common.scss में सबसे ऊपर इंपोर्ट करें:
@import "./variables";नेविगेशन पैनल में सीएसएस स्टाइलिंग जोड़ना
home.scss में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:
@import "@material/ripple/mixins";इसके बाद, .shrine-drawer क्लास बनाकर, ये स्टाइल जोड़ें:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}http://localhost:8080/home.html पर जाकर, पेज को रीफ़्रेश करें. अब आपकी होम स्क्रीन ऐसी दिखनी चाहिए:
आइए, लॉगिन स्क्रीन का रंग बदलकर अपनी कलर स्कीम के हिसाब से सेट करें.
लॉगिन पेज में सीएसएस स्टाइलिंग जोड़ना
login.scss में, यहां दी गई लाइनें जोड़ें:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}इसके अलावा, .username, .password सीएसएस सिलेक्टर में ये मिक्सइन इनवोकेशन भी जोड़ें:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}http://localhost:8080/ पर जाकर, पेज को रीफ़्रेश करें. अब आपकी लॉगिन स्क्रीन ऐसी दिखनी चाहिए:
रंगों में बदलाव के साथ-साथ, आपके डिज़ाइनर ने आपको साइट पर इस्तेमाल करने के लिए खास टाइपोग्राफ़ी भी दी है. इसे नेविगेशन ड्रॉअर में भी जोड़ते हैं.
टाइपोग्राफ़ी के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
npm install @material/typography
टाइपोग्राफ़ी के लिए सीएसएस जोड़ना
home.scss में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:
@import "@material/typography/mdc-typography";इसके बाद, shrine-title क्लास में यह मिक्सइन इनवोकेशन जोड़ें:
.shrine-title {
@include mdc-typography(headline6);
...
}इसके बाद, आइए ड्रॉअर आइटम को स्टाइल करें.
लाइन सेपरेटर जोड़ना
home.html में, <a ...>Featured</a> एलिमेंट के ठीक बाद यह जोड़ें:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>home.scss में ये स्टाइल जोड़ें:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}इमेज आइटम और लेबल में बदलाव करना
आइटम और लेबल में बदलाव करने के लिए, .product-list सिलेक्टर में मौजूद home.scss में ये स्टाइल जोड़ें:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}पेज रीफ़्रेश करें. अब आपकी होम स्क्रीन ऐसी दिखनी चाहिए:
आपने Shrine की खास कलरिंग और टाइपोग्राफ़ी का इस्तेमाल करके पेज को स्टाइल कर लिया है. अब Shrine के प्रॉडक्ट दिखाने वाली इमेज की सूची देखते हैं. आइए, प्रॉडक्ट पर ज़्यादा ज़ोर देकर, लोगों का ध्यान उन पर खींचें.
Elevation के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
npm install @material/elevation
इंपोर्ट स्टेटमेंट जोड़ना
home.scss में, इंपोर्ट करने के आखिरी स्टेटमेंट के बाद यह लाइन जोड़ें:
@import "@material/elevation/mdc-elevation";इमेज की सूची को नए div से रैप करना
home.html में, <ul> एलिमेंट के आस-पास यह मार्कअप जोड़ें:
<div class="shrine-body">
<ul...>
</div>Sass मिक्सइन का इस्तेमाल करके एलिवेशन बदलना
home.scss में यह जोड़ें:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}बहुत ही बढ़िया! आपने इमेज लिस्ट आइटम के पीछे मौजूद सफ़ेद रंग की सतह के बाईं ओर एक शैडो जोड़ा है, ताकि वह नेविगेशन से थोड़ा ऊपर तैरती हुई दिखे.
इसके बाद, हम लेआउट को बदलकर इमेज को अलग-अलग आसपेक्ट रेशियो और साइज़ में दिखाएंगे, ताकि हर इमेज दूसरी इमेज से अलग दिखे.
एचटीएमएल में बदलाव करना
home.html में, mdc-image-list एलिमेंट को अपडेट करके उसमें mdc-image-list--masonry क्लास जोड़ें:
<ul class="mdc-image-list mdc-image-list--masonry product-list">इमेज जोड़ना
home.html में, हर img एलिमेंट के src एट्रिब्यूट की वैल्यू को assets फ़ोल्डर में मौजूद इमेज से मैच करें. इसके बाद, हर इमेज के लिए लेबल टेक्स्ट अपडेट करें. पूरा होने के बाद, यह ऐसा दिखना चाहिए:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</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>सीएसएस को अपडेट करना
home.scss में, mdc-image-list-standard-columns(4) मिक्सइन हटाएं और इसे इस मिक्सइन से बदलें:
@include mdc-image-list-masonry-columns(4);इसके बाद, home.scss में product-list क्लास में ये padding वैल्यू जोड़ें:
.product-list {
...
padding: 80px 100px 0;
}
आपका कोड अब complete/ फ़ोल्डर में शामिल कोड से मेल खाना चाहिए.
रंग, अपने ब्रैंड को दिखाने का एक असरदार तरीका है. रंग में थोड़ा सा बदलाव करने से, उपयोगकर्ता अनुभव पर काफ़ी असर पड़ सकता है. इसे आज़माने के लिए, आइए देखते हैं कि अगर ब्रैंड की कलर स्कीम पूरी तरह से अलग हो, तो Shrine कैसा दिखेगा.
सीएसएस में बदलाव करें
_variables.scss में, प्राइमरी थीम के लिए तय किए गए वैरिएबल को इन वैरिएबल से बदलें:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;login.scss में, .username, .password सिलेक्टर में मौजूद मिक्सइन हटाएं. यह इस तरह दिखना चाहिए:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}इसके अलावा, mdc-button-ink-color क्लास में mdc-button-ink-color मिक्सइन को ओवरराइड करने की सुविधा हटाएं:.cancel
home.scss में, .home क्लास के लिए यह नियम जोड़ें:
background-color: $mdc-theme-background;.shrine-logo-drawer सिलेक्टर में, fill प्रॉपर्टी को on-primary रंग से बदलें:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}इसी तरह, .shrine-title सिलेक्टर में color प्रॉपर्टी को on-primary कलर पर सेट करें:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
आखिर में, .shrine-body सिलेक्टर में पहले इस्तेमाल किए गए mdc-elevation मिक्सइन को हटाएं.
बनाएं और चलाएं. अब आपके ब्राउज़र में नई थीम दिखनी चाहिए.
अब home.html पेज में हुए बदलावों को देखने के लिए, http://localhost:8080/home.html पर जाएं.
अब आपने एक ऐसा ऐप्लिकेशन बना लिया है जो आपके डिज़ाइनर की खास बातों से मिलता-जुलता है.
अगले चरण
अब आपने इन MDC कॉम्पोनेंट का इस्तेमाल कर लिया है: थीम, टाइपोग्राफ़ी, एलिवेशन, और शेप. MDC Web Catalog में जाकर, ज़्यादा कॉम्पोनेंट और सबसिस्टम देखे जा सकते हैं.