मटीरियल कॉम्पोनेंट (एमडीसी) डेवलपर को मटीरियल डिज़ाइन लागू करने में मदद करता है. Google के इंजीनियर और UX डिज़ाइनर की टीम ने, MDC में दर्जनों खूबसूरत और फ़ंक्शनल यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बनाए हैं. यह Android, iOS, वेब, और Fluter के लिए उपलब्ध है. material.io/develop |
वेब के लिए मटीरियल डिज़ाइन और मटीरियल कॉम्पोनेंट क्या होते हैं?
मटीरियल डिज़ाइन, बोल्ड और खूबसूरत डिजिटल प्रॉडक्ट बनाने का एक सिस्टम है. सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को जोड़कर, प्रॉडक्ट टीमें अपने सबसे बड़े डिज़ाइन की संभावना को महसूस कर सकती हैं.
डेस्कटॉप और मोबाइल वेब के लिए, मटीरियल कॉम्पोनेंट वेब (MDC वेब), ऐप्लिकेशन और वेबसाइटों पर एक जैसा काम करने के लिए, कॉम्पोनेंट की लाइब्रेरी के साथ डिज़ाइन और इंजीनियरिंग को जोड़ता है. MDC वेब कॉम्पोनेंट हर एक अपने नोड मॉड्यूल में लाइव होते हैं. इसलिए, जैसे-जैसे मटीरियल डिज़ाइन सिस्टम विकसित होता है, ये कॉम्पोनेंट आसानी से अपडेट किए जा सकते हैं, ताकि यह पक्का किया जा सके कि ये पिक्सल-सही लागू हों और Google के #फ़्रंट-एंड डेवलपमेंट स्टैंडर्ड का पालन करते रहें. MDC को Android, iOS, और Fltur के लिए भी इस्तेमाल किया जा सकता है.
इस कोडलैब में, आप कई MDC वेब' कॉम्पोनेंट का इस्तेमाल करके, लॉगिन पेज बनाएंगे.
आप क्या बनाते हैं
यह कोडलैब तीन कोडलैब में से पहला है, जो आपको श्रिन नाम के ऐप्लिकेशन को बनाने में मदद करेगा. यह ई-कॉमर्स वेबसाइट है जो कपड़े और घर का सामान बेचती है. इससे पता चलेगा कि आप MDC वेब का इस्तेमाल करके किसी भी ब्रैंड या शैली को दिखाने के लिए कॉम्पोनेंट को कैसे कस्टमाइज़ कर सकते हैं.
इस कोडलैब में आप #39; मंदिर के लिए एक लॉगिन पेज बनाएंगे, जिसमें ये चीज़ें शामिल होंगी:
- दो टेक्स्ट फ़ील्ड, एक उपयोगकर्ता नाम डालने के लिए और दूसरा पासवर्ड के लिए
- दो बटन, एक &कोटेशन रद्द करें
- वेबसाइट का नाम (श्रिन)
- मंदिर के लोगो की इमेज
इस कोडलैब में MDC वेब कॉम्पोनेंट
- टेक्स्ट फ़ील्ड
- Button
- रिपल
आपको क्या चाहिए
- Node.js का हाल ही का वर्शन (जो JavaScript पैकेज मैनेजर npm के साथ आता है).
- सैंपल कोड (अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
हम हमेशा अपने ट्यूटोरियल को बेहतर बनाने की कोशिश करते रहते हैं. आप वेब डेवलपमेंट के अपने अनुभव के स्तर को कितनी रेटिंग देंगे?
स्टार्टर कोडलैब (कोड बनाना सीखना) ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन 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/ ले जाएं.
खाता ट्रांसफ़र हो गया है! मठ के नाम का स्टार्टर कोड #39; आपके ब्राउज़र में लॉगिन पेज होना चाहिए. आपको नाम और कोटेशन > श्रिन& कोट; और श्राइन के नीचे मंदिर का लोगो दिखाई देना चाहिए.
कोड पर एक नज़र डालें
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फ़ाइल को लोड करने के लिए किया जाता है, जो वेबपैक से जनरेट किया गया है. साथ ही, <script> टैग में bundle-login.js फ़ाइल शामिल है. साथ ही, हम क्रॉस-ब्राउज़र रेंडरिंग के लिए normalize.css और Google Fonts से Roboto फ़ॉन्ट भी शामिल करते हैं.
login.scss में पसंद के मुताबिक स्टाइल
MDC वेब कॉम्पोनेंट को mdc-* सीएसएस क्लास का इस्तेमाल करके, स्टाइल किया जाता है, जैसे कि mdc-text-field क्लास. (एमडीसी वेब अपने डीओएम स्ट्रक्चर को अपने सार्वजनिक एपीआई के हिस्से के तौर पर देखता है.)
आम तौर पर, यह सुझाव दिया जाता है कि आप अपनी कक्षाओं का इस्तेमाल करके कॉम्पोनेंट में पसंद के मुताबिक शैली में बदलाव करें. आपने ऊपर दिए गए एचटीएमएल में कुछ कस्टम सीएसएस क्लास देखी होगी, जैसे कि shrine-logo. पेज में मूल स्टाइल जोड़ने के लिए, इन स्टाइल को login.scss में तय किया गया है.
login.scss खोलें और आपको #39; लॉगिन पेज के लिए ये शैलियां दिखाई देंगी:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}अब आप #33; स्टार्टर कोड के बारे में जानते हैं, तो चलिए हमारा पहला कॉम्पोनेंट लागू कर देते हैं.
शुरू करने के लिए, हम अपने लॉगिन पेज पर दो टेक्स्ट फ़ील्ड जोड़ेंगे. यहां लोग अपना उपयोगकर्ता नाम और पासवर्ड डाल पाएंगे. हम MDC टेक्स्ट फ़ील्ड कॉम्पोनेंट का इस्तेमाल करेंगे. इसमें पहले से मौजूद फ़ंक्शन शामिल है, जो फ़्लोटिंग लेबल दिखाता है और टच रिपल को चालू करता है.
MDC टेक्स्ट फ़ील्ड
MDC वेब कॉम्पोनेंट NPM पैकेज की मदद से प्रकाशित किए जाते हैं. टेक्स्ट फ़ील्ड कॉम्पोनेंट के लिए पैकेज इंस्टॉल करने के लिए, यह चलाएं:
npm install @material/textfield
एचटीएमएल जोड़ना
index.html में, मुख्य हिस्से में <form> एलिमेंट के अंदर इन्हें जोड़ें:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>MDC टेक्स्ट फ़ील्ड डीओएम स्ट्रक्चर के कई हिस्से हैं:
- मुख्य एलिमेंट,
mdc-text-field mdc-text-field__input,mdc-floating-label, औरmdc-line-rippleएलिमेंट शामिल हैं
सीएसएस जोड़ना
login.scss में, मौजूदा इंपोर्ट के बाद यह इंपोर्ट स्टेटमेंट जोड़ें:
@import "@material/textfield/mdc-text-field";टेक्स्ट फ़ील्ड को अलाइन करने और बीच में रखने के लिए, उसी फ़ाइल में नीचे दी गई शैलियां जोड़ें:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}JavaScript जोड़ना
login.js को खोलें. फ़िलहाल, यह खाली है. टेक्स्ट फ़ील्ड को इंपोर्ट और इंस्टैंशिएट करने के लिए, यह कोड जोड़ें:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));HTML5 की पुष्टि करना जोड़ें
टेक्स्ट फ़ील्ड, HTML5's फ़ॉर्म की पुष्टि करने वाले एपीआई के दिए गए एट्रिब्यूट का इस्तेमाल करके यह बताते हैं कि फ़ील्ड इनपुट मान्य है या उसमें कोई गड़बड़ी है.
आपको ये काम करने चाहिए:
- उपयोगकर्ता नाम और पासवर्ड टेक्स्ट फ़ील्ड, दोनों के
mdc-text-field__inputएलिमेंट मेंrequiredएट्रिब्यूट जोड़ें - पासवर्ड टेक्स्ट फ़ील्ड के
mdc-text-field__inputएलिमेंट केminlengthएट्रिब्यूट को"8"पर सेट करें
खोज के नतीजों में दिखने के लिए इन <div class="mdc-text-field"> एलिमेंट में बदलाव करें:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>http://localhost:8080/ पर पेज रीफ़्रेश करें. अब आपको उपयोगकर्ता नाम और पासवर्ड के लिए दो टेक्स्ट फ़ील्ड वाला एक पेज दिखाई देगा!
फ़्लोटिंग लेबल ऐनिमेशन और लाइन रिपल ऐनिमेशन देखने के लिए टेक्स्ट फ़ील्ड पर क्लिक करें. सबसे नीचे की बॉर्डर लाइन बाहर की ओर निकलती है.
इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ेंगे: &कोटेशन;रद्द करें&कोट करें; और &कोटेशन;अगला;&कोटेशन; हम &इसे 30, 000 रुपये वाले MDC बटन कॉम्पोनेंट के साथ-साथ MDC Ripble कॉम्पोनेंट के साथ भी इस्तेमाल करेंगे. ऐसा करके, हम ऐतिहासिक मटीरियल डिज़ाइन इंक रिपल इफ़ेक्ट को पूरा करेंगे.
एमडीसी बटन इंस्टॉल करें
बटन कॉम्पोनेंट वाला पैकेज इंस्टॉल करने के लिए, यह चलाएं:
npm install @material/button
एचटीएमएल जोड़ना
index.html में, <div class="mdc-text-field 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
login.js के ऊपर, यह इंपोर्ट स्टेटमेंट जोड़ें:
import {MDCRipple} from '@material/ripple';रिपल को इंस्टैंशिएट करने के लिए, निम्न को login.js में जोड़ें:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));हमें रिपल इंस्टेंस का संदर्भ बनाए रखने की ज़रूरत नहीं है, इसलिए इसे #39; वैरिएबल को असाइन करने की ज़रूरत नहीं है.
हो गया! पेज रीफ़्रेश करें. हर बटन पर क्लिक करने पर एक इंक रिपल दिखेगा.
टेक्स्ट फ़ील्ड में सही वैल्यू डालें और &कोटेशन&आगे बढ़ें बटन दबाएं. आपने कर दिखाया! आप MDC-102 में इस पेज पर काम करना जारी रख पाएंगे.
बुनियादी एचटीएमएल मार्कअप और सीएसएस और JavaScript की कुछ लाइनों का इस्तेमाल करके, वेब लाइब्रेरी के मटीरियल कॉम्पोनेंट की मदद से आप ऐसा खूबसूरत लॉगिन पेज बना सकते हैं जो मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक हो. साथ ही, यह सभी डिवाइस पर एक जैसा दिखता है और काम करता है.
अगले कदम
MDC वेब लाइब्रेरी में टेक्स्ट फ़ील्ड, बटन, और रिपल तीन मुख्य घटक हैं, लेकिन और भी कई हैं! आप एमडीसी वेब में बाकी कॉम्पोनेंट भी देख सकते हैं.
नेविगेशन पैनल और इमेज सूची के बारे में जानने के लिए, आप MDC-102: मटीरियल डिज़ाइन स्ट्रक्चर और लेआउट पर जा सकते हैं. मटीरियल कॉम्पोनेंट आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!