MDC-101 वेब: मटीरियल कॉम्पोनेंट्स (एमडीसी) के बारे में बुनियादी बातें (वेब)

1. परिचय

logo_components_color_2x_web_96dp.png

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

मटीरियल डिज़ाइन और Material Components for the Web क्या हैं?

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

डेस्कटॉप और मोबाइल वेब के लिए, Material Components Web (MDC Web), डिज़ाइन और इंजीनियरिंग को एक साथ लाता है. साथ ही, यह ऐप्लिकेशन और वेबसाइटों में एक जैसा अनुभव देने के लिए, कॉम्पोनेंट की लाइब्रेरी उपलब्ध कराता है. MDC Web कॉम्पोनेंट, अपने-अपने नोड मॉड्यूल में मौजूद होते हैं. इसलिए, मटीरियल डिज़ाइन सिस्टम में बदलाव होने पर, इन कॉम्पोनेंट को आसानी से अपडेट किया जा सकता है. इससे यह पक्का किया जा सकता है कि पिक्सल-परफ़ेक्ट तरीके से लागू किया गया हो और Google के फ़्रंट-एंड डेवलपमेंट स्टैंडर्ड का पालन किया गया हो. MDC, Android, iOS, और Flutter के लिए भी उपलब्ध है.

इस कोडलैब में, MDC Web के कई कॉम्पोनेंट का इस्तेमाल करके, लॉगिन पेज बनाने का तरीका बताया गया है.

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

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

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

  • दो टेक्स्ट फ़ील्ड, एक उपयोगकर्ता नाम डालने के लिए और दूसरा पासवर्ड डालने के लिए
  • दो बटन, एक "रद्द करें" के लिए और दूसरा "आगे बढ़ें" के लिए
  • वेबसाइट का नाम (Shrine)
  • श्राइन के लोगो की इमेज

674d1ca8cfa98c9.png

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

  • टेक्स्ट फ़ील्ड
  • बटन
  • रिपल

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

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

हम हमेशा अपने ट्यूटोरियल को बेहतर बनाने की कोशिश करते हैं. वेब डेवलपमेंट के अपने अनुभव को आप क्या रेटिंग देंगे?

शुरुआती स्तर सामान्य स्तर एडवांस लेवल

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

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

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

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

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

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

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

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

npm install

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

204c063d8fd78f94.png

अगर ऐसा नहीं होता है, तो npm audit fix चलाएं.

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

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

npm start

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

17c139dc5a9bebaf.png

हो गया! आपके ब्राउज़र में, Shrine के लॉगिन पेज का स्टार्टर कोड चल रहा हो. आपको "Shrine" नाम और उसके ठीक नीचे Shrine का लोगो दिखेगा.

f7e3f354df8d84b8.png

कोड देखें

index.html में मेटाडेटा

स्टार्टर डायरेक्ट्री में, अपने पसंदीदा कोड एडिटर से index.html खोलें. इसमें यह जानकारी होनी चाहिए:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

यहां, <link> टैग का इस्तेमाल, webpack से जनरेट हुई bundle-login.css फ़ाइल को लोड करने के लिए किया गया है. साथ ही, <script> टैग में bundle-login.js फ़ाइल शामिल है. इसके अलावा, हम अलग-अलग ब्राउज़र पर एक जैसा रेंडरिंग अनुभव देने के लिए, normalize.css को शामिल करते हैं. साथ ही, Google Fonts से Roboto फ़ॉन्ट को भी शामिल करते हैं.

login.scss में कस्टम स्टाइल

MDC Web कॉम्पोनेंट को mdc-* सीएसएस क्लास का इस्तेमाल करके स्टाइल किया जाता है. जैसे, क्लास mdc-text-field. (MDC Web, अपने DOM स्ट्रक्चर को अपने सार्वजनिक एपीआई का हिस्सा मानता है.)

आम तौर पर, हमारा सुझाव है कि आप अपनी क्लास का इस्तेमाल करके, कॉम्पोनेंट में पसंद के मुताबिक स्टाइल से जुड़े बदलाव करें. आपने ऊपर दिए गए एचटीएमएल में कुछ कस्टम सीएसएस क्लास देखी होंगी, जैसे कि shrine-logo. इन स्टाइल को login.scss में तय किया जाता है, ताकि पेज में बुनियादी स्टाइल जोड़ी जा सकें.

login.scss खोलें. आपको लॉगिन पेज के लिए ये स्टाइल दिखेंगी:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

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

3. टेक्स्ट फ़ील्ड जोड़ना

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

9ad8a7db0b50f07d.png

MDC टेक्स्ट फ़ील्ड इंस्टॉल करें

MDC Web कॉम्पोनेंट, NPM पैकेज के ज़रिए पब्लिश किए जाते हैं. टेक्स्ट फ़ील्ड कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:

npm install @material/textfield@^6.0.0

एचटीएमएल जोड़ना

index.html में, बॉडी के <form> एलिमेंट में यह जोड़ें:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

एमडीसी टेक्स्ट फ़ील्ड के DOM स्ट्रक्चर में कई हिस्से होते हैं:

  • मुख्य एलिमेंट, mdc-text-field
  • सब-एलिमेंट mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label, और mdc-line-ripple

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

login.scss में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:

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

टेक्स्ट फ़ील्ड को अलाइन करने और बीच में लाने के लिए, उसी फ़ाइल में ये स्टाइल जोड़ें:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

JavaScript जोड़ना

login.js खोलें, जो फ़िलहाल खाली है. टेक्स्ट फ़ील्ड को इंपोर्ट करने और इंस्टैंशिएट करने के लिए, यह कोड जोड़ें:

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

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

HTML5 की पुष्टि करने की सुविधा जोड़ना

टेक्स्ट फ़ील्ड, यह बताते हैं कि फ़ील्ड में डाला गया इनपुट मान्य है या उसमें कोई गड़बड़ी है. इसके लिए, HTML5 के फ़ॉर्म की पुष्टि करने वाले API के ज़रिए दिए गए एट्रिब्यूट का इस्तेमाल किया जाता है.

आपको यह करना चाहिए:

  • उपयोगकर्ता नाम और पासवर्ड, दोनों टेक्स्ट फ़ील्ड के mdc-text-field__input एलिमेंट में required एट्रिब्यूट जोड़ें
  • पासवर्ड टेक्स्ट फ़ील्ड के mdc-text-field__input एलिमेंट के minlength एट्रिब्यूट को "8" पर सेट करें

दोनों <label class="mdc-text-field mdc-text-field--filled"> एलिमेंट को इस तरह से बदलें:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

http://localhost:8080/ पर जाकर, पेज को रीफ़्रेश करें. अब आपको उपयोगकर्ता नाम और पासवर्ड के लिए दो टेक्स्ट फ़ील्ड वाला पेज दिखेगा!

फ़्लोटिंग लेबल ऐनिमेशन और लाइन रिपल ऐनिमेशन (नीचे की बॉर्डर लाइन, जो बाहर की ओर जाती है) देखने के लिए, टेक्स्ट फ़ील्ड पर क्लिक करें:

c0b341e9949a6183.gif

4. बटन जोड़ना

इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें". हम मटीरियल डिज़ाइन के आइकॉनिक इंक रिपल इफ़ेक्ट को पूरा करने के लिए, MDC बटन कॉम्पोनेंट के साथ-साथ MDC रिपल कॉम्पोनेंट का इस्तेमाल करेंगे.

674d1ca8cfa98c9.png

MDC बटन इंस्टॉल करना

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

npm install @material/button@^6.0.0

एचटीएमएल जोड़ना

index.html में, <label class="mdc-text-field mdc-text-field--filled password"> एलिमेंट के क्लोज़िंग टैग के नीचे यह जोड़ें:

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

"रद्द करें" बटन के लिए, हम बटन की डिफ़ॉल्ट स्टाइल का इस्तेमाल कर रहे हैं. हालांकि, "आगे बढ़ें" बटन में raised स्टाइल वैरिएंट का इस्तेमाल किया गया है. इसे mdc-button--raised क्लास से दिखाया गया है.

बाद में उन्हें आसानी से अलाइन करने के लिए, हम दोनों mdc-button एलिमेंट को <div> एलिमेंट में रैप करते हैं.

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

login.scss में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:

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

बटन को अलाइन करने और उनके चारों ओर मार्जिन जोड़ने के लिए, login.scss में ये स्टाइल जोड़ें:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

बटन में इंक रिपल इफ़ेक्ट जोड़ना

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

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

npm install @material/ripple@^6.0.0

login.js में सबसे ऊपर, यह इंपोर्ट स्टेटमेंट जोड़ें:

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

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

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

हमें रिपल इंस्टेंस का रेफ़रंस बनाए रखने की ज़रूरत नहीं है. इसलिए, इसे किसी वैरिएबल को असाइन करने की ज़रूरत नहीं है.

हो गया! पेज रीफ़्रेश करें. हर बटन पर क्लिक करने पर, इंक रिपल दिखेगा.

bb19b0a567977bde.gif

टेक्स्ट फ़ील्ड में मान्य वैल्यू डालें. इसके बाद, "आगे बढ़ें" बटन दबाएं. आपने कर दिखाया! MDC-102 में, इस पेज पर काम जारी रहेगा.

5. रीकैप

Material Components for the web लाइब्रेरी की मदद से, आपने बुनियादी एचटीएमएल मार्कअप और सीएसएस और JavaScript की कुछ लाइनों का इस्तेमाल करके, एक बेहतरीन लॉगिन पेज बनाया है. यह पेज, मटीरियल डिज़ाइन के दिशा-निर्देशों का पालन करता है. साथ ही, यह सभी डिवाइसों पर एक जैसा दिखता है और एक जैसा काम करता है.

अगले चरण

टेक्स्ट फ़ील्ड, बटन, और रिपल, MDC Web लाइब्रेरी में तीन मुख्य कॉम्पोनेंट हैं. हालांकि, इसमें और भी कई कॉम्पोनेंट मौजूद हैं! MDC Web में मौजूद अन्य कॉम्पोनेंट के बारे में भी जानें.

नेविगेशन पैनल और इमेज लिस्ट के बारे में जानने के लिए, MDC-102: मटीरियल डिज़ाइन स्ट्रक्चर और लेआउट पर जाएं. Material Components आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!

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

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

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

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