1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. MDC को Google के इंजीनियरों और यूज़र एक्सपीरियंस (यूएक्स) डिज़ाइनर की टीम ने बनाया है. इसमें कई शानदार और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter.material.io/develop के लिए उपलब्ध है |
Material Design और Material Components for the Web क्या हैं?
Material Design, डिजिटल प्रॉडक्ट को बेहतर और खूबसूरत बनाने का एक सिस्टम है. स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत लाकर, प्रॉडक्ट टीमें डिज़ाइन की अपनी पूरी क्षमता का इस्तेमाल कर सकती हैं.
डेस्कटॉप और मोबाइल वेब के लिए, Material Components Web (MDC Web), डिज़ाइन और इंजीनियरिंग को एक साथ लाता है. साथ ही, यह ऐप्लिकेशन और वेबसाइटों में एक जैसा अनुभव देने के लिए, कॉम्पोनेंट की लाइब्रेरी उपलब्ध कराता है. MDC Web कॉम्पोनेंट, अपने-अपने नोड मॉड्यूल में मौजूद होते हैं. इसलिए, Material Design सिस्टम में बदलाव होने पर, इन कॉम्पोनेंट को आसानी से अपडेट किया जा सकता है. इससे यह पक्का किया जा सकता है कि पिक्सल-परफ़ेक्ट तरीके से लागू किया गया हो और Google के फ़्रंट-एंड डेवलपमेंट स्टैंडर्ड का पालन किया गया हो. MDC, Android, iOS, और Flutter के लिए भी उपलब्ध है.
इस कोडलैब में, MDC Web के कई कॉम्पोनेंट का इस्तेमाल करके लॉगिन पेज बनाया जाएगा.
आपको क्या बनाने को मिलेगा
यह कोडलैब, तीन कोडलैब की सीरीज़ का पहला कोडलैब है. इसमें आपको Shrine नाम का ऐप्लिकेशन बनाने के बारे में बताया जाएगा. यह एक ई-कॉमर्स वेबसाइट है, जहां कपड़े और घर के सामान बेचे जाते हैं. इसमें यह दिखाया जाएगा कि MDC Web का इस्तेमाल करके, किसी ब्रैंड या स्टाइल को दिखाने के लिए कॉम्पोनेंट को कैसे पसंद के मुताबिक बनाया जा सकता है.
इस कोडलैब में, आपको Shrine के लिए एक लॉगिन पेज बनाने का तरीका बताया जाएगा. इसमें ये चीज़ें शामिल होंगी:
- दो टेक्स्ट फ़ील्ड, एक उपयोगकर्ता नाम डालने के लिए और दूसरा पासवर्ड डालने के लिए
- दो बटन, एक "रद्द करें" के लिए और दूसरा "आगे बढ़ें" के लिए
- वेबसाइट का नाम (Shrine)
- श्राइन के लोगो की इमेज
इस कोडलैब में 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
आपको कई गतिविधियां दिखेंगी. आखिर में, आपके टर्मिनल पर यह मैसेज दिखेगा कि ऐप्लिकेशन इंस्टॉल हो गया है:
अगर ऐसा नहीं होता है, तो 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> टैग का इस्तेमाल, 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 टेक्स्ट फ़ील्ड कॉम्पोनेंट का इस्तेमाल करेंगे. इसमें पहले से मौजूद ऐसी सुविधाएं शामिल हैं जो फ़्लोटिंग लेबल दिखाती हैं और टच रिपल को चालू करती हैं.
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/ पर जाकर, पेज को रीफ़्रेश करें. अब आपको उपयोगकर्ता नाम और पासवर्ड के लिए दो टेक्स्ट फ़ील्ड वाला पेज दिखेगा!
फ़्लोटिंग लेबल ऐनिमेशन और लाइन रिपल ऐनिमेशन (नीचे की बॉर्डर लाइन, जो बाहर की ओर जाती है) देखने के लिए, टेक्स्ट फ़ील्ड पर क्लिक करें:
4. बटन जोड़ना
इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: "रद्द करें" और "आगे बढ़ें". हम MDC बटन कॉम्पोनेंट के साथ-साथ MDC रिपल कॉम्पोनेंट का इस्तेमाल करेंगे, ताकि आइकॉनिक मटीरियल डिज़ाइन इंक रिपल इफ़ेक्ट को पूरा किया जा सके.
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'));
हमें रिपल इंस्टेंस का रेफ़रंस बनाए रखने की ज़रूरत नहीं है. इसलिए, इसे किसी वैरिएबल को असाइन करने की ज़रूरत नहीं है.
हो गया! पेज रीफ़्रेश करें. हर बटन पर क्लिक करने पर, इंक रिपल दिखेगा.
टेक्स्ट फ़ील्ड में मान्य वैल्यू डालें. इसके बाद, "आगे बढ़ें" बटन दबाएं. आपने कर दिखाया! MDC-102 में, इस पेज पर काम जारी रखा जा सकता है.
5. रीकैप
Material Components for the web लाइब्रेरी की मदद से, आपने एक बेहतरीन लॉगिन पेज बनाया है. इसके लिए, आपने बुनियादी एचटीएमएल मार्कअप के साथ-साथ सीएसएस और JavaScript की कुछ ही लाइनों का इस्तेमाल किया है. यह पेज, Material Design के दिशा-निर्देशों का पालन करता है. साथ ही, यह सभी डिवाइसों पर एक जैसा दिखता है और एक जैसा काम करता है.
अगले चरण
MDC Web लाइब्रेरी में टेक्स्ट फ़ील्ड, बटन, और रिपल तीन मुख्य कॉम्पोनेंट हैं. हालांकि, इसमें और भी कई कॉम्पोनेंट मौजूद हैं! MDC Web में मौजूद अन्य कॉम्पोनेंट के बारे में भी जानें.
नेविगेशन ड्रॉअर और इमेज की सूची के बारे में जानने के लिए, MDC-102: Material Design Structure and Layout पर जाएं. Material Components आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!