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

1. परिचय

logo_components_color_2x_web_96dp.png

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

वेब के लिए मटीरियल डिज़ाइन और मटीरियल कॉम्पोनेंट क्या हैं?

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

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

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

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

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

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

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

674d1ca8cfa98c9.png

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

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

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

  • Node.js का नया वर्शन. यह 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

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

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-* सीएसएस क्लास का इस्तेमाल करके स्टाइल किया जाता है, जैसे कि क्लास mdc-text-field. (एमडीसी वेब अपने डीओएम स्ट्रक्चर को अपने सार्वजनिक एपीआई का हिस्सा मानता है.)

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

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

@import "./common";

.header {
  text-align: center;
}

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

स्टार्टर कोड के बारे में जानने के बाद, अब हम अपना पहला कॉम्पोनेंट लागू करते हैं.

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

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

9ad8a7db0b50f07d.png

इंस्टॉल करें the एमडीसी टेक्स्ट फ़ील्ड

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

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>

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

  • मुख्य एलिमेंट, 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 के फ़ॉर्म की पुष्टि करने वाले एपीआई से मिले एट्रिब्यूट का इस्तेमाल किया जाता है.

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

  • उपयोगकर्ता नाम और पासवर्ड टेक्स्ट फ़ील्ड, दोनों के 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. बटन जोड़ना

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

674d1ca8cfa98c9.png

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

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

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>

"रद्द करें" के लिए बटन, हम बटन की डिफ़ॉल्ट स्टाइल का इस्तेमाल कर रहे हैं. हालांकि, "अगला" बटन एक बढ़ाई गई शैली के वैरिएंट का इस्तेमाल करता है, जिसे 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. रीकैप

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

अगले चरण

टेक्स्ट फ़ील्ड, बटन, और रिपल एमडीसी वेब लाइब्रेरी में तीन मुख्य कॉम्पोनेंट हैं, लेकिन अभी और भी बहुत कुछ है! एमडीसी वेब में बाकी कॉम्पोनेंट के बारे में भी जाना जा सकता है.

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

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

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

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

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