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