MDC-111 वेब: अपने कोड बेस में मटीरियल कॉम्पोनेंट शामिल करना (वेब)

1. परिचय

logo_components_color_2x_web_96dp.png

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

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

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

इस कोडलैब में, आपको कुछ मौजूदा कॉम्पोनेंट को MDC वेब से मिले फ़ॉर्म से बदलना होगा:

c33f9d1388feca74.png

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

  • बटन
  • चुनें
  • टेक्स्ट फ़ील्ड

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

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

वेब डेवलपमेंट के अपने अनुभव को लेकर, 1 से 5 के स्केल पर आप किस हद तक संतुष्ट हैं?

शुरुआती इंटरमीडिएट कुशल

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

स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना

स्टार्टर ऐप्लिकेशन, material-components-web-codelabs-master/mdc-111/starter डायरेक्ट्री में मौजूद है. शुरू करने से पहले, उस डायरेक्ट्री में cd करना न भूलें.

...या GitHub से इसका क्लोन बनाएं

GitHub से इस कोडलैब का क्लोन बनाने के लिए, ये निर्देश चलाएं:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-111/starter

प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करना

स्टार्टर डायरेक्ट्री (material-components-web-codelabs/mdc-111/starter) से, यह चलाएं:

npm install

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

bb3a822c020c9287.png

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

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

npm start

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

aa9263b15ae4f8d8.png

हो गया! आपको ऐप्लिकेशन का शिपिंग पते का फ़ॉर्म दिखना चाहिए:

8f60906e660b695e.png

3. बटन अपडेट करें

एमडीसी बटन इंस्टॉल करना

डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. इसके बाद, MDC बटन NPM पैकेज इंस्टॉल करें और सर्वर को रीस्टार्ट करें:

npm install @material/button
npm start

सीएसएस इंपोर्ट करें

_theme.scss में सबसे ऊपर, .crane-button { ... } ब्लॉक मिटाएं और उसकी जगह यह जोड़ें:

$mdc-theme-primary: $crane-primary-color;

@import "@material/button/mdc-button";

मार्कअप अपडेट करना

index.html में, <button> एलिमेंट से crane-button क्लास हटाएं, mdc-button और mdc-button--raised क्लास जोड़ें, और लेबल को mdc-button__label क्लास वाले <span> एलिमेंट में नेस्ट करें:

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

रिपल जोड़ना

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

डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. फिर चलाएं:

npm install @material/ripple
npm start

app.js के ऊपर यह इंपोर्ट स्टेटमेंट जोड़ें:

import {MDCRipple} from '@material/ripple';

बटन पर रिपल इफ़ेक्ट लागू करने के लिए, app.js के नीचे यह जोड़ें:

new MDCRipple(document.querySelector('.mdc-button'));

Roboto फ़ॉन्ट इंपोर्ट करना

डिफ़ॉल्ट रूप से, Material Design, कॉम्पोनेंट टाइपफ़ेस के लिए Roboto का इस्तेमाल करता है.

index.html में, <head> एलिमेंट में ये जोड़कर Roboto वेब फ़ॉन्ट इंपोर्ट करें:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

पेज को फिर से लोड करें. आपको कुछ ऐसा दिखेगा:

9be8eb813b02eada.gif

यह बटन दबाने पर, अब विज़ुअल फ़ीडबैक के तौर पर हल्का रिपल इफ़ेक्ट दिखाता है.

4. चुने गए एलिमेंट को अपडेट करना

एमडीसी सिलेक्ट कॉम्पोनेंट में, नेटिव एचटीएमएल <select> एलिमेंट शामिल होता है. इसका इस्तेमाल उन सभी जगहों पर करें जहां आम तौर पर <select> का इस्तेमाल किया जाता है. आइए, "स्टेटस" फ़ील्ड को अपडेट करें.

एमडीसी नोड मॉड्यूल इंस्टॉल करना

डेवलपमेंट सर्वर को बंद करने के लिए Ctrl+C दबाएं. फिर चलाएं:

npm install @material/select
npm start

सीएसएस इंपोर्ट करें

बटन इंपोर्ट करने के ठीक बाद, _theme.scss में ये चीज़ें जोड़ें:

@import "@material/select/mdc-select";

मार्कअप अपडेट करना

index.html में <select> एलिमेंट ढूंढें. crane-input क्लास को mdc-select__native-control से बदलें:

<select class="mdc-select__native-control" id="crane-state-input" required>

<select> टैग के ठीक ऊपर, MDC Select कॉम्पोनेंट के ड्रॉप-डाउन ऐरो के लिए यह मार्कअप जोड़ें:

<i class="mdc-select__dropdown-icon"></i>

क्लोज़िंग </select> टैग के ठीक नीचे, crane-label क्लास को mdc-floating-label से बदलें:

<label class="mdc-floating-label" for="crane-state-input">

इसके बाद लेबल के तुरंत बाद, नीचे दिया गया मार्कअप जोड़ें:

<div class="mdc-line-ripple"></div>

आखिर में, <select> एलिमेंट के आस-पास (लेकिन crane-field एलिमेंट के अंदर) नीचे दिए गए टैग जोड़ें:

<div class="mdc-select">
  ...
</div>

इससे बनने वाला मार्कअप कुछ ऐसा दिखना चाहिए:

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

JS इंपोर्ट करना

app.js के ऊपर यह इंपोर्ट स्टेटमेंट जोड़ें:

import {MDCSelect} from '@material/select';

चुने गए को इंस्टैंशिएट करने के लिए, app.js में नीचे दिया गया तरीका जोड़ें:

new MDCSelect(document.querySelector('.mdc-select'));

पेज को फिर से लोड करें. अब यह इस तरह दिखेगा:

20fa4104564f8195.gif

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

5. टेक्स्ट फ़ील्ड अपडेट करें

सामान्य <input> एलिमेंट की तुलना में, Material Design वाले टेक्स्ट फ़ील्ड को इस्तेमाल करना काफ़ी आसान है. इन्हें इस तरह से डिज़ाइन किया गया है कि मुश्किल कॉन्टेंट को आसानी से पहचाना जा सके. साथ ही, जब उपयोगकर्ता इनसे इंटरैक्ट करता है, तो इन्हें विज़ुअल तौर पर आसानी से दिखाया जा सकता है.

एमडीसी नोड मॉड्यूल इंस्टॉल करना

डेवलपमेंट सर्वर को बंद करने के लिए Ctrl+C दबाएं. फिर चलाएं:

npm install @material/textfield
npm start

सीएसएस जोड़ना

चुनने के बाद इंपोर्ट करें. इसके बाद, इन्हें _theme.scss में जोड़ें:

@import "@material/textfield/mdc-text-field";

मार्कअप अपडेट करना

index.html में, "नाम" फ़ील्ड के लिए <input> एलिमेंट ढूंढें. crane-input क्लास को mdc-text-field__input से बदलें:

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

इसके बाद, crane-label क्लास को mdc-floating-label से बदलें:

<label class="mdc-floating-label" for="crane-name-input">

इसके बाद लेबल के तुरंत बाद, नीचे दिया गया मार्कअप जोड़ें:

<div class="mdc-line-ripple"></div>

आखिर में, तीनों एलिमेंट को इस तरह रैप करें:

<div class="mdc-text-field">
  ...
</div>

इससे बनने वाला मार्कअप कुछ ऐसा दिखना चाहिए:

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

पेज पर मौजूद दूसरे सभी <input> एलिमेंट के लिए भी यही तरीका दोहराएं.

"पता", "शहर", और "पिन कोड" फ़ील्ड के लिए मार्कअप इस तरह दिखना चाहिए:

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

अब _theme.scss से .crane-label और .crane-input स्टाइल हटाए जा सकते हैं. इनका अब इस्तेमाल नहीं किया जाता.

JS इंपोर्ट करना

app.js के सबसे ऊपर, इंपोर्ट स्टेटमेंट जोड़ें:

import {MDCTextField} from '@material/textfield';

टेक्स्ट फ़ील्ड को इंस्टैंशिएट करने के लिए, app.js के नीचे यह जोड़ें:

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

पेज को फिर से लोड करें. अब यह इस तरह दिखेगा:

c33f9d1388feca74.png

मटीरियल थीम का इस्तेमाल करने के लिए, सभी टेक्स्ट फ़ील्ड को अपडेट कर दिया गया है.

6. रीकैप

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

टॉप ऐप्लिकेशन बार और नेविगेशन ड्रॉअर जैसे अन्य कॉम्पोनेंट भी काफ़ी फ़र्क़ डाल सकते हैं.

अगले चरण

एमडीसी वेब कैटलॉग पर जाकर, एमडीसी वेब में और भी कॉम्पोनेंट देखे जा सकते हैं.

अगर आपको किसी खास फ़्रेमवर्क के साथ एमडीसी वेब का इस्तेमाल करना है, तो MDC-112: एमडीसी को वेब फ़्रेमवर्क के साथ इंटिग्रेट करना लेख पढ़ें.

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

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत

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

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