MDC-102 वेब: मटीरियल स्ट्रक्चर और लेआउट (वेब)

1. परिचय

logo_components_color_2x_web_96dp.png

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

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

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

इस कोडलैब में, आपको Shरीन नाम के ऐप्लिकेशन का होम पेज बनाना है. यह एक ई-कॉमर्स ऐप्लिकेशन है जो कपड़े और घर का सामान बेचता है. इसमें ये चीज़ें शामिल होंगी:

  • नेविगेशन पैनल
  • प्रॉडक्ट से भरी इमेज की सूची

e2f359c254988d75.png

इस कोडलैब में MDC वेब कॉम्पोनेंट

  • ड्रॉवर
  • चित्र सूची

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

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

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

शुरुआती इंटरमीडिएट विशेषज्ञ

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

क्या आपने 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

कई गतिविधियां दिखने के बाद, आपके टर्मिनल पर यह दिखेगा कि ऐप्लिकेशन इंस्टॉल हो गया है:

23003b0e5fdf9077.png

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

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

npm start

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

4e04758051693865.png

हो गया! आपको MDC-101 कोडलैब से, Shrine का लॉगिन पेज दिखेगा.

6c206785707bee2e.png

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

3. नेविगेशन पैनल जोड़ें

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

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

एमडीसी ड्रॉर और लिस्ट इंस्टॉल करें

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

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 जोड़ना

सही कीबोर्ड नेविगेशन के लिए, हमें नेविगेशन पैनल के अंदर एमडीसी सूची को इंस्टैंशिएट करना होगा. home.js खोलें, जो अभी खाली है और यह कोड जोड़ें:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

http://localhost:8080/home.html पर जाकर, पेज को रीफ़्रेश करें. आपका होम पेज अब कुछ ऐसा दिखना चाहिए:

9c145a फ़ोकसbc28214.png

अब होम पेज पर परसिस्टेंट नेविगेशन ड्रॉअर है, जिसमें अलग-अलग नेविगेशन आइटम दिखते हैं. पहला आइटम चालू होता है.

4. टेक्स्ट लेबल वाली इमेज जोड़ना

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

एमडीसी की इमेज सूची इंस्टॉल करें

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

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

ये स्टाइल, इमेज की सूची को चार कॉलम में इमेज दिखाने का निर्देश देते हैं. इससे यह पक्का किया जाता है कि इमेज की सूची, पैनल से अलग स्क्रोल करे.

पेज रीफ़्रेश करें. होम पेज अब कुछ ऐसा दिखना चाहिए:

5362b330204ffd58.png

इमेज की सूची का मकसद, किसी कलेक्शन में कई इमेज दिखाना है. इसलिए, कॉम्पोनेंट के काम करने का तरीका बेहतर तरीके से देखने के लिए, ज़्यादा इमेज जोड़ें.

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 में जानकारी मिलेगी.

रीफ्रेश करें पर टैप करें. अब होम पेज ऐसा दिखेगा:

e2f359c254988d75.png

इमेज की सूची में हर पंक्ति में चार इमेज दिखती हैं. साथ ही, इमेज का साइज़, स्क्रीन के उपलब्ध स्पेस के हिसाब से अपने-आप अडजस्ट हो जाता है.

5. रीकैप

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

अगले चरण

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

होम पेज पूरी तरह से काम कर रहा है, लेकिन इसमें अब तक किसी ब्रैंड या नज़रिए को शामिल नहीं किया गया है. MDC-103: कलर, आकार, ऊंचाई, और टाइप के साथ Material Design थीम में, आपको इन कॉम्पोनेंट के स्टाइल को पसंद के मुताबिक बनाने का मौका मिलेगा, ताकि आपके ब्रैंड को शानदार और मॉडर्न दिखाया जा सके.

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

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमति है पूरी तरह असहमति है

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

पूरी तरह सहमत सहमत कोई बात नहीं असहमत पूरी तरह असहमत