1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन को लागू कर सकते हैं. एमडीसी को Google में इंजीनियरों और यूएक्स डिज़ाइनर की एक टीम ने बनाया है. इसमें यूज़र इंटरफ़ेस (यूआई) के कई शानदार और काम के कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter.material.io/develop के लिए उपलब्ध है |
वेब के लिए मटीरियल डिज़ाइन और मटीरियल कॉम्पोनेंट क्या हैं?
मटीरियल डिज़ाइन, शानदार और बेहतरीन डिजिटल प्रॉडक्ट बनाने का एक सिस्टम है. स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट में शामिल करके, प्रॉडक्ट टीमें डिज़ाइन की अपनी सबसे बड़ी क्षमता को हासिल कर सकती हैं.
डेस्कटॉप और मोबाइल वेब के लिए, मटीरियल कॉम्पोनेंट वेब (एमडीसी वेब), डिज़ाइन और इंजीनियरिंग को कॉम्पोनेंट की एक लाइब्रेरी के साथ जोड़ता है. इससे ऐप्लिकेशन और वेबसाइटों में एक जैसा डिज़ाइन बनाया जा सकता है. एमडीसी वेब के हर कॉम्पोनेंट के लिए, अलग-अलग नोड मॉड्यूल होते हैं. इसलिए, मटीरियल डिज़ाइन सिस्टम के विकसित होने पर, इन कॉम्पोनेंट को आसानी से अपडेट किया जा सकता है. इससे पक्का किया जा सकता है कि पिक्सल-परफ़ेक्ट तरीके से लागू किया जाए और Google के फ़्रंट-एंड डेवलपमेंट के मानकों का पालन किया जाए. एमडीसी, Android, iOS, और Flutter के लिए भी उपलब्ध है.
इस कोडलैब में, आपको एमडीसी वेब के कई कॉम्पोनेंट का इस्तेमाल करके, लॉगिन पेज बनाना सिखाया जाएगा.
आपको क्या बनाना है
यह कोडलैब, तीन कोडलैब की सीरीज़ का पहला कोडलैब है. इसमें आपको Shrine नाम का एक ऐप्लिकेशन बनाना सिखाया जाएगा. यह एक ई-कॉमर्स वेबसाइट है, जिस पर कपड़े और घर का सामान बेचा जाता है. इसमें आपको यह दिखाया जाएगा कि एमडीसी वेब का इस्तेमाल करके, कॉम्पोनेंट को किसी भी ब्रैंड या स्टाइल के हिसाब से कैसे पसंद के मुताबिक बनाया जा सकता है.
इस कोडलैब में, आपको Shrine के लिए एक लॉगिन पेज बनाना सिखाया जाएगा. इसमें ये चीज़ें शामिल होंगी:
- दो टेक्स्ट फ़ील्ड. इनमें से एक में उपयोगकर्ता नाम और दूसरे में पासवर्ड डाला जा सकेगा
- दो बटन. इनमें से एक "रद्द करें" और दूसरा "आगे बढ़ें" के लिए होगा
- वेबसाइट का नाम (Shrine)
- Shrine के लोगो की एक इमेज
इस कोडलैब में एमडीसी वेब के कॉम्पोनेंट
- टेक्स्ट फ़ील्ड
- बटन
- रिपल
आपको इनकी ज़रूरत होगी
- 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
आपको कई गतिविधियां दिखेंगी. इसके बाद, आपके टर्मिनल पर इंस्टॉल होने की पुष्टि करने वाला मैसेज दिखेगा:
अगर ऐसा नहीं होता है, तो npm audit fix कमांड चलाएं.
शुरुआती ऐप्लिकेशन चलाना
उसी डायरेक्ट्री में, यह कमांड चलाएं:
npm start
webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.
हो गया! Shrine के लॉगिन पेज का शुरुआती कोड, आपके ब्राउज़र में चलना चाहिए. आपको "Shrine" नाम और उसके ठीक नीचे Shrine का लोगो दिखना चाहिए.
कोड देखना
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> टैग का इस्तेमाल करके, bundle-login.css फ़ाइल लोड की जाती है. इसे webpack ने जनरेट किया था. वहीं, <script> टैग में bundle-login.js फ़ाइल शामिल होती है. इसके अलावा, हम अलग-अलग ब्राउज़र पर एक जैसा रेंडरिंग करने के लिए, normalize.css और Google Fonts से Roboto फ़ॉन्ट शामिल करते हैं.
login.scss में कस्टम स्टाइल
एमडीसी वेब के कॉम्पोनेंट को स्टाइल करने के लिए, mdc-* सीएसएस क्लास का इस्तेमाल किया जाता है. जैसे, mdc-text-field क्लास. (एमडीसी वेब, अपने 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. टेक्स्ट फ़ील्ड जोड़ना
शुरुआत में, हम अपने लॉगिन पेज में दो टेक्स्ट फ़ील्ड जोड़ेंगे. इनमें लोग अपना उपयोगकर्ता नाम और पासवर्ड डाल पाएंगे. हम एमडीसी टेक्स्ट फ़ील्ड कॉम्पोनेंट का इस्तेमाल करेंगे. इसमें ऐसी बिल्ट-इन सुविधा शामिल है जो फ़्लोटिंग लेबल दिखाती है और टच रिपल को ऐक्टिवेट करती है.
एमडीसी टेक्स्ट फ़ील्ड इंस्टॉल करना
एमडीसी वेब के कॉम्पोनेंट, एनपीएम पैकेज के ज़रिए पब्लिश किए जाते हैं. टेक्स्ट फ़ील्ड कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
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'));
एचटीएमएल5 की पुष्टि करने की सुविधा जोड़ना
टेक्स्ट फ़ील्ड से यह पता चलता है कि फ़ील्ड का इनपुट मान्य है या उसमें कोई गड़बड़ी है. इसके लिए, एचटीएमएल5 के फ़ॉर्म की पुष्टि करने वाले एपीआई से मिले एट्रिब्यूट का इस्तेमाल किया जाता है.
आपको यह करना चाहिए:
- उपयोगकर्ता नाम और पासवर्ड के दोनों टेक्स्ट फ़ील्ड के
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/ पर पेज रीफ़्रेश करें. अब आपको उपयोगकर्ता नाम और पासवर्ड के लिए दो टेक्स्ट फ़ील्ड वाला पेज दिखेगा!
फ़्लोटिंग लेबल ऐनिमेशन और लाइन रिपल ऐनिमेशन (सबसे नीचे की बॉर्डर लाइन जो बाहर की ओर रिपल करती है) देखने के लिए, टेक्स्ट फ़ील्ड पर क्लिक करें:
4. बटन जोड़ना
इसके बाद, हम अपने लॉगिन पेज में दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें." हम एमडीसी बटन कॉम्पोनेंट के साथ-साथ, एमडीसी रिपल कॉम्पोनेंट का इस्तेमाल करके, मटीरियल डिज़ाइन के आइकॉनिक इंक रिपल इफ़ेक्ट को पूरा करेंगे.
एमडीसी बटन इंस्टॉल करना
बटन कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह कमांड चलाएं:
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'));
हमें रिपल इंस्टेंस का रेफ़रंस सेव करने की ज़रूरत नहीं है. इसलिए, इसे किसी वैरिएबल को असाइन करने की ज़रूरत नहीं है.
बस इतना ही! पेज रीफ़्रेश करें. हर बटन पर क्लिक करने पर, इंक रिपल दिखेगा.
टेक्स्ट फ़ील्ड में मान्य वैल्यू डालें और "आगे बढ़ें" बटन दबाएं. आपने कर दिखाया! एमडीसी-102 में, आपको इस पेज पर काम करना जारी रखना होगा.
5. रीकैप
वेब के लिए मटीरियल कॉम्पोनेंट की लाइब्रेरी की मदद से, बुनियादी एचटीएमएल मार्कअप और सीएसएस और JavaScript की कुछ लाइनों का इस्तेमाल करके, आपने एक शानदार लॉगिन पेज बनाया है. यह मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक है. साथ ही, यह सभी डिवाइसों पर एक जैसा दिखता है और काम करता है.
अगले चरण
टेक्स्ट फ़ील्ड, बटन, और रिपल, एमडीसी वेब लाइब्रेरी के तीन मुख्य कॉम्पोनेंट हैं. हालांकि, इसमें कई और कॉम्पोनेंट भी हैं! एमडीसी वेब में मौजूद बाकी कॉम्पोनेंट भी देखे जा सकते हैं.
नेविगेशन ड्रॉअर और इमेज लिस्ट के बारे में जानने के लिए, एमडीसी-102: मटीरियल डिज़ाइन का स्ट्रक्चर और लेआउट पर जाएं. मटीरियल कॉम्पोनेंट आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!