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

1. परिचय

logo_components_color_2x_web_96dp.png

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

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

आपको क्या बनाने को मिलेगा

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

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

e2f359c254988d75.png

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

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

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

  • Node.js का नया वर्शन. यह npm के साथ बंडल किया गया है. 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. नेविगेशन पैनल जोड़ना

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

मटीरियल डिज़ाइन के नेविगेशन पैटर्न, इस्तेमाल करने में बहुत आसान होते हैं. 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 पर जाकर, पेज को रीफ़्रेश करें. अब आपका होम पेज ऐसा दिखना चाहिए:

9c145acccbc28214.png

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

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

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

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

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

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

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 Web लाइब्रेरी के दो और Material Design कोर कॉम्पोनेंट इस्तेमाल कर लिए हैं! MDC Web Catalog पर जाकर, ज़्यादा कॉम्पोनेंट देखे जा सकते हैं.

यह पूरी तरह से काम कर रहा है. हालांकि, होम पेज पर अब तक किसी ब्रैंड या नज़रिए के बारे में नहीं बताया गया है. MDC-103: Material Design Theming with Color, Shape, Elevation and Type में, आपको इन कॉम्पोनेंट की स्टाइल को पसंद के मुताबिक बनाने का तरीका बताया जाएगा. इससे आपको अपने ब्रैंड को मॉडर्न और आकर्षक लुक देने में मदद मिलेगी.

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

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

मुझे आने वाले समय में, Material Components का इस्तेमाल जारी रखना है

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