इस पेज का अनुवाद Cloud Translation API से किया गया है.

MDC-103 वेब: रंग, आकार, ऊंचाई और टाइप (वेब) के साथ मटीरियल थीमिंग

1. परिचय

मटीरियल कॉम्पोनेंट (एमडीसी), मटीरियल डिज़ाइन लागू करने में डेवलपर की मदद करते हैं. Google में इंजीनियरों और UX डिज़ाइनर की टीम ने बनाया है. एमडीसी में दर्जनों खूबसूरत और काम करने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट हैं. यह Android, iOS, वेब और Flutter.material.io/प्रॉडक्ट के लिए उपलब्ध है

कोडलैब MDC-101 और MDC-102 में आपने मटीरियल कॉम्पोनेंट (एमडीसी) का इस्तेमाल करके, Shरीन नाम के ऐप्लिकेशन की बुनियादी चीज़ों को तैयार किया है. यह एक ई-कॉमर्स ऐप्लिकेशन है जो कपड़े और घर का सामान बेचता है. इस ऐप्लिकेशन का यूज़र फ़्लो, लॉगिन स्क्रीन से शुरू होता है. इसके बाद, यह उपयोगकर्ता को प्रॉडक्ट वाली होम स्क्रीन पर ले जाता है.

मटीरियल डिज़ाइन को हाल ही में ज़्यादा सुविधाएं दी गई हैं, ताकि डिज़ाइनर और डेवलपर को अपने प्रॉडक्ट के ब्रैंड को ज़ाहिर करने में आसानी हो. इस कोड लैब में, आपको एमडीसी का इस्तेमाल करके श्राइन ऐप्लिकेशन को अपनी पसंद के मुताबिक बनाना होगा. इससे, ब्रैंड की खास स्टाइल को पहले के मुकाबले ज़्यादा तरीकों से दिखाया जा सकेगा.

आपको क्या बनाना होगा

इस कोडलैब में, ऐप्लिकेशन को इस तरह से कस्टमाइज़ किया जा सकता है कि वह अपने ब्रैंड के बारे में बताए. इसके लिए, इनका इस्तेमाल करें:

रंग
मुद्रण कला
ऊंचाई
आकार
लेआउट

इस कोडलैब में इस्तेमाल किए जाने वाले एमडीसी वेब कॉम्पोनेंट और सबसिस्टम

थीम
मुद्रण कला
ऊंचाई
चित्र सूची

आपको इन चीज़ों की ज़रूरत होगी

Node.js का नया वर्शन. यह npm के साथ आता है, जो एक JavaScript पैकेज मैनेजर होता है.
सैंपल कोड (अगले चरण में डाउनलोड किया जाना है)
एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी

वेब डेवलपमेंट के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती

इंटरमीडिएट

कुशल

2. अपना डेवलपमेंट एनवायरमेंट सेट अप करें

क्या 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

आपको बहुत सारी गतिविधियां दिखेंगी और आखिर में, आपके टर्मिनल में एक सफल इंस्टॉल दिखना चाहिए:

एमडीसी वेब, Sass नाम के सीएसएस प्रीप्रोसेसर का इस्तेमाल करता है. अगर किसी दूसरे सीएसएस प्रीप्रोसेसर का इस्तेमाल किया जा रहा है (या कोई भी नहीं है), तो ठीक है! अपने मौजूदा टूलचेन में sass सीएलआई इंस्टॉल करके या किसी प्लगिन का इस्तेमाल करके (उदाहरण के लिए, Webpack के लिए sass-loader, Gulp के लिए Gulp-sass या ग्रंट के लिए grunt-sass इंस्टॉल करके, Sass का इस्तेमाल किया जा सकता है.

हमारा कोड IE 11 जैसे पुराने ब्राउज़र में काम करे, इसके लिए हम Babel नाम के ट्रांसपिलर का इस्तेमाल करते हैं. इससे MDC Web के ES2015 JavaScript सिंटैक्स को ES5 JavaScript सिंटैक्स में ट्रांसपाइल किया जा सकता है.

हम अपनी फ़ाइलों को बंडल करने और अपनी साइट को स्थानीय तौर पर उपलब्ध कराने के लिए, webpack का इस्तेमाल करेंगे. आपके लिए इस प्रोजेक्ट के webpack कॉन्फ़िगरेशन को, webpack.config.js फ़ाइल में पहले ही सेट अप कर लिया गया है. इसे कैसे कॉन्फ़िगर किया गया था, इस बारे में ज़्यादा जानकारी के लिए, शुरुआती निर्देश देखें.

स्टार्टर ऐप्लिकेशन चलाएं

उसी डायरेक्ट्री में, इसे चलाएं:

npm start

webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.

हो गया! आपको अपने ब्राउज़र में ब्राउज़र का लॉगिन पेज दिखेगा. उपयोगकर्ता नाम और पासवर्ड फ़ील्ड भरें और "अगला" पर क्लिक करें होम पेज पर जाने के लिए बटन. इसमें बाईं ओर प्रॉडक्ट की इमेज के ग्रिड के बगल में एक नेविगेशन पैनल दिखेगा.

नेविगेशन पैनल काम करता है, लेकिन अब इसे श्राइन ब्रैंड से मिलता-जुलता बनाने के लिए, उसका रंग, ऊंचाई, और टाइपोग्राफ़ी बदलें.

3. रंग बदलें

इस रंग की थीम को किसी डिज़ाइनर ने पसंद के मुताबिक रंगों के साथ बनाया है (नीचे दी गई इमेज में दिखाया गया है). इसमें ऐसे रंग शामिल हैं जिन्हें श्राइन के ब्रैंड से चुना गया है और मटीरियल थीम एडिटर पर लागू किया गया है. इस तरह, इन रंगों को बड़ा करके एक बेहतर पैलेट बनाया जा सकता है. (ये रंग 2014 के मटीरियल रंग पटल से नहीं हैं.)

चलिए, ऐप्लिकेशन के नेविगेशन पैनल का रंग बदलकर उस कलर स्कीम को दिखाते हैं.

थीम के रंगों को बदलना

_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.scs में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:

@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/ पर जाकर पेज को रीफ़्रेश करें. लॉगिन स्क्रीन अब कुछ इस तरह दिखेगी:

4. टाइपोग्राफ़ी और लेबल के स्टाइल में बदलाव करें

रंग में बदलावों के अलावा, आपके डिज़ाइनर ने आपको साइट पर इस्तेमाल करने के लिए खास टाइपोग्राफ़ी भी दी है. आइए, उसे नेविगेशन पैनल में भी जोड़ें.

टाइपोग्राफ़ी के लिए पैकेज इंस्टॉल करने के लिए, इसे चलाएं:

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);
  }
}

पेज रीफ़्रेश करें. आपकी होम स्क्रीन अब ऐसी दिखेगी:

5. ऊंचाई में बदलाव करें

अब आपने पेज के रंग और टाइपोग्राफ़ी के हिसाब से पेज का स्टाइल तय कर लिया है, तो चलिए अब साइट के प्रॉडक्ट दिखाने वाली इमेज की सूची पर नज़र डालते हैं. आइए, प्रॉडक्ट पर फ़ोकस करके लोगों का ध्यान खींचें.

एलिवेशन के लिए पैकेज इंस्टॉल करने के लिए, इसे चलाएं:

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
}

बहुत ही बढ़िया! आपने इमेज की सूची में शामिल आइटम के पीछे सफ़ेद सतह के बाएं किनारे पर परछाई जोड़ी है, ताकि यह नेविगेशन से थोड़ा ऊपर फ़्लोट करे.

6. लेआउट बदलें

इसके बाद, अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) और साइज़ में इमेज दिखाने के लिए, लेआउट में बदलाव करते हैं, ताकि हर इमेज दूसरी इमेज की तुलना में अलग दिखे.

एचटीएमएल में बदलाव करना

home.html में, mdc-image-list--masonry क्लास शामिल करने के लिए, mdc-image-list एलिमेंट को अपडेट करें:

<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/ फ़ोल्डर में शामिल कोड से मेल खाना चाहिए.

7. कोई दूसरी थीम आज़माएं

रंग अपने ब्रैंड को ज़ाहिर करने का एक असरदार तरीका है. रंग में छोटा सा बदलाव भी आपके उपयोगकर्ता अनुभव को बेहतर बनाता है. इसे आज़माने के लिए, आइए देखते हैं कि अगर इस ब्रैंड की कलर स्कीम पूरी तरह से अलग होती, तो श्राइन कैसा दिखता.

सीएसएस में बदलाव करना

_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;
}

इसके अलावा, .cancel क्लास से mdc-button-ink-color मिक्सिन ओवरराइड हटाएं:

home.scss में, .home क्लास में यह नियम जोड़ें:

background-color: $mdc-theme-background;

.shrine-logo-drawer सिलेक्टर में, fill प्रॉपर्टी को प्राइमरी पर रंग में बदलें:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

इसी तरह, .shrine-title सिलेक्टर में, color प्रॉपर्टी को प्राइमरी के तौर पर रंग पर सेट करें:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

आखिर में, .shrine-body सिलेक्टर में जाकर, पहले इस्तेमाल किया गया mdc-elevation मिक्सिन हटाएं.

बनाएं और चलाएं. नई थीम अब आपके ब्राउज़र में दिखेगी.

अब home.html पेज में हुए बदलावों को देखने के लिए, http://localhost:8080/home.html पर जाएं.

8. रीकैप

अब आपने अपने डिज़ाइनर की खास बातों से मेल खाने वाला ऐप्लिकेशन बना लिया है.

अगले चरण

अब आपने एमडीसी कॉम्पोनेंट का इस्तेमाल कर लिया है: थीम, टाइपोग्राफ़ी, ऊंचाई, और आकार. एमडीसी वेब कैटलॉग में ज़्यादा कॉम्पोनेंट और सबसिस्टम देखे जा सकते हैं.

मैंने सही समय और मेहनत में इस कोडलैब को पूरा कर लिया

पूरी तरह सहमत

सहमत

कोई फ़र्क़ नहीं पड़ता

असहमत

पूरी तरह असहमत

मुझे आने वाले समय में मटीरियल कॉम्पोनेंट इस्तेमाल करते रहना है