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

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

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

subjectपिछली बार अक्टू॰ 11, 2020 को अपडेट किया गया
account_circleLiz Mitchell, Abhinay Omkar ने लिखा

1. परिचय

logo_components_color_2x_web_96dp.png

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

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

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

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

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

e2f359c254988d75.png

इस कोडलैब में मौजूद एमडीसी वेब कॉम्पोनेंट

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

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

  • 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

हो गया! आपको एमडीसी-101 कोडलैब से श्राइन का लॉगिन पेज दिखेगा.

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 पर जाकर पेज रीफ़्रेश करें. आपका होम पेज अब कुछ ऐसा दिखना चाहिए:

9c145accbc28214.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 इमेज बन जाएंगी. अभी तक खास इमेज और टाइटल की चिंता न करें; तक पहुंचने के लिए एमडीसी-103 तक जाएं.

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

e2f359c254988d75.png

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

5. रीकैप

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

अगले चरण

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

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

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

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