1. परिचय
मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. MDC को Google के इंजीनियरों और यूएक्स डिज़ाइनरों की एक टीम ने बनाया है. इसमें कई शानदार और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है. इसे Flutter.material.io/develop पर जाकर डाउनलोड किया जा सकता है |
Material Components for the web (MDC Web), फ़्रेमवर्क से अलग होते हैं. इन्हें रेगुलर JavaScript का इस्तेमाल करके बनाया जाता है. इससे MDC Web को आपकी डेवलपमेंट प्रोसेस के साथ आसानी से काम करने में मदद मिलती है. इन कॉम्पोनेंट को ज़रूरत के हिसाब से इंस्टॉल किया जा सकता है. इससे आपके मौजूदा ऐप्लिकेशन के डिज़ाइन में तेज़ी से सुधार करने में मदद मिलती है.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको फ़ॉर्म में मौजूद कुछ कॉम्पोनेंट को MDC Web से मिले कॉम्पोनेंट से बदलना होगा:
इस कोडलैब में MDC Web कॉम्पोनेंट
- बटन
- चुनें
- टेक्स्ट फ़ील्ड
आपको इन चीज़ों की ज़रूरत होगी
- Node.js का नया वर्शन. यह npm के साथ बंडल किया गया है. npm, JavaScript पैकेज मैनेजर है.
- सैंपल कोड (इसे अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
वेब डेवलपमेंट के अपने अनुभव को आप क्या रेटिंग देंगे?
2. डेवलपमेंट एनवायरमेंट सेट अप करना
स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना
स्टार्टर ऐप्लिकेशन, material-components-web-codelabs-master/mdc-111/starter डायरेक्ट्री में मौजूद होता है. शुरू करने से पहले, उस डायरेक्ट्री में cd ज़रूर करें.
...या इसे GitHub से क्लोन करें
इस कोडलैब को GitHub से क्लोन करने के लिए, यहां दिए गए निर्देश चलाएं:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करना
स्टार्टर डायरेक्ट्री (material-components-web-codelabs/mdc-111/starter) से, यह कमांड चलाएं:
npm install
आपको कई गतिविधियां दिखेंगी. आखिर में, आपके टर्मिनल पर यह मैसेज दिखेगा कि ऐप्लिकेशन इंस्टॉल हो गया है:
स्टार्टर ऐप्लिकेशन चलाना
स्टार्टर डायरेक्ट्री में जाकर, यह कमांड चलाएं:
npm start
webpack-dev-server शुरू हो जाएगा. पेज देखने के लिए, अपने ब्राउज़र को http://localhost:8080/ पर ले जाएं.
हो गया! आपको ऐप्लिकेशन का शिपिंग पता फ़ॉर्म दिखेगा:
3. बटन को अपडेट करना
MDC बटन इंस्टॉल करना
डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. इसके बाद, MDC Button NPM पैकेज इंस्टॉल करें और सर्वर को फिर से शुरू करें:
npm install @material/button npm start
सीएसएस इंपोर्ट करना
_theme.scss में सबसे ऊपर, _theme.scss ब्लॉक को मिटाएं और उसकी जगह यह कोड जोड़ें:.crane-button { ... }
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
मार्कअप अपडेट करना
index.html में, <button> एलिमेंट से crane-button क्लास हटाएं. इसके बाद, mdc-button और mdc-button--raised क्लास जोड़ें. साथ ही, लेबल को mdc-button__label क्लास वाले <span> एलिमेंट में नेस्ट करें:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
रिपल इफ़ेक्ट जोड़ना
MDC बटन का इस्तेमाल, JavaScript के बिना किया जा सकता है. हालांकि, बटन में इंटरैक्टिव रिपल जोड़ने से, उपयोगकर्ता को बेहतर अनुभव मिलता है.
डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. इसके बाद, यह कमांड चलाएं:
npm install @material/ripple npm start
app.js के सबसे ऊपर, इंपोर्ट करने का यह स्टेटमेंट जोड़ें:
import {MDCRipple} from '@material/ripple';
बटन पर रिपल इफ़ेक्ट जोड़ने के लिए, app.js के सबसे नीचे यह कोड जोड़ें:
new MDCRipple(document.querySelector('.mdc-button'));
Roboto फ़ॉन्ट इंपोर्ट करना
डिफ़ॉल्ट रूप से, Material Design कॉम्पोनेंट टाइपफ़ेस के लिए Roboto का इस्तेमाल करता है.
index.html में, Roboto Web फ़ॉन्ट इंपोर्ट करें. इसके लिए, <head> एलिमेंट में यह जोड़ें:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
पेज को फिर से लोड करें. आपको कुछ ऐसा दिखेगा:
अब बटन को दबाने पर, विज़ुअल फ़ीडबैक के तौर पर हल्का रिपल इफ़ेक्ट दिखता है.
4. चुने गए एलिमेंट को अपडेट करना
MDC Select कॉम्पोनेंट, नेटिव एचटीएमएल <select> एलिमेंट को रैप करता है. इसका इस्तेमाल उन सभी जगहों पर करें जहां आम तौर पर <select> का इस्तेमाल किया जाता है. आइए, "राज्य" फ़ील्ड को अपडेट करें.
MDC Node मॉड्यूल इंस्टॉल करना
डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. इसके बाद, यह कमांड चलाएं:
npm install @material/select npm start
सीएसएस इंपोर्ट करना
बटन इंपोर्ट करने के ठीक बाद, _theme.scss में यह जोड़ें:
@import "@material/select/mdc-select";
मार्कअप अपडेट करना
index.html में <select> एलिमेंट ढूंढें. crane-input क्लास को mdc-select__native-control से बदलें:
<select class="mdc-select__native-control" id="crane-state-input" required>
<select> टैग के ठीक ऊपर, MDC Select कॉम्पोनेंट के ड्रॉप-डाउन ऐरो के लिए यह मार्कअप जोड़ें:
<i class="mdc-select__dropdown-icon"></i>
क्लोज़िंग </select> टैग के ठीक नीचे, crane-label क्लास को mdc-floating-label से बदलें:
<label class="mdc-floating-label" for="crane-state-input">
इसके बाद, लेबल के तुरंत बाद यह मार्कअप जोड़ें:
<div class="mdc-line-ripple"></div>
आखिर में, <select> एलिमेंट के चारों ओर ये टैग जोड़ें. हालांकि, इन्हें crane-field एलिमेंट के अंदर जोड़ें:
<div class="mdc-select">
...
</div>
इससे मिलने वाला मार्कअप कुछ ऐसा दिखना चाहिए:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
JS इंपोर्ट करना
app.js के सबसे ऊपर, इंपोर्ट करने का यह स्टेटमेंट जोड़ें:
import {MDCSelect} from '@material/select';
select को इंस्टैंशिएट करने के लिए, app.js के सबसे नीचे यह कोड जोड़ें:
new MDCSelect(document.querySelector('.mdc-select'));
पेज को फिर से लोड करें. अब यह कुछ इस तरह दिखेगा:
MDC Select कॉम्पोनेंट, उपयोगकर्ता को विकल्पों की सूची दिखाता है. यह सूची, उपयोगकर्ता को जाने-पहचाने फ़ॉर्मैट में दिखती है, लेकिन इसमें मॉडर्न स्टाइलिंग होती है.
5. टेक्स्ट फ़ील्ड अपडेट करना
Material Design के टेक्स्ट फ़ील्ड, <input> एलिमेंट की तुलना में इस्तेमाल करने में ज़्यादा आसान होते हैं. इन्हें इस तरह से डिज़ाइन किया गया है कि जटिल कॉन्टेंट में भी इन्हें आसानी से पहचाना जा सके. साथ ही, जब उपयोगकर्ता इनसे इंटरैक्ट करता है, तो ये विज़ुअल फ़ीडबैक दिखाते हैं.
MDC Node मॉड्यूल इंस्टॉल करना
डेवलपमेंट सर्वर को बंद करने के लिए, Ctrl+C दबाएं. इसके बाद, यह कमांड चलाएं:
npm install @material/textfield npm start
सीएसएस जोड़ना
इंपोर्ट करने का विकल्प चुनने के ठीक बाद, _theme.scss में यह जोड़ें:
@import "@material/textfield/mdc-text-field";
मार्कअप अपडेट करना
index.html में, "नाम" फ़ील्ड के लिए <input> एलिमेंट ढूंढें. crane-input क्लास को mdc-text-field__input से बदलें:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
इसके बाद, crane-label क्लास को mdc-floating-label से बदलें:
<label class="mdc-floating-label" for="crane-name-input">
इसके बाद, लेबल के तुरंत बाद यह मार्कअप जोड़ें:
<div class="mdc-line-ripple"></div>
आखिर में, इन तीनों एलिमेंट को इस कोड से रैप करें:
<div class="mdc-text-field">
...
</div>
इससे मिलने वाला मार्कअप कुछ ऐसा दिखना चाहिए:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
पेज पर मौजूद अन्य सभी <input> एलिमेंट के लिए भी यही तरीका दोहराएं.
"पता", "शहर", और "पिन कोड" फ़ील्ड के लिए मार्कअप ऐसा दिखना चाहिए:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
अब _theme.scss से .crane-label और .crane-input स्टाइल हटाई जा सकती हैं. इनका इस्तेमाल अब नहीं किया जाता.
JS इंपोर्ट करना
app.js के सबसे ऊपर, इंपोर्ट करने का यह स्टेटमेंट जोड़ें:
import {MDCTextField} from '@material/textfield';
टेक्स्ट फ़ील्ड को इंस्टैंशिएट करने के लिए, app.js के सबसे नीचे यह कोड जोड़ें:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
पेज को फिर से लोड करें. अब यह कुछ इस तरह दिखेगा:
टेक्स्ट फ़ील्ड को अब Material Theming का इस्तेमाल करने के लिए अपडेट कर दिया गया है.
6. रीकैप
आपने अपने ऐप्लिकेशन को पूरी तरह से रीडिज़ाइन किए बिना, कुछ सामान्य कॉम्पोनेंट (टेक्स्ट फ़ील्ड, चुनें, और बटन) बदल दिए हैं. बहुत बढ़िया!
टॉप ऐप्लिकेशन बार और नेविगेशन ड्रॉअर जैसे अन्य कॉम्पोनेंट भी, यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाने में अहम भूमिका निभाते हैं.
अगले चरण
MDC Web कैटलॉग पर जाकर, MDC Web में मौजूद अन्य कॉम्पोनेंट के बारे में भी जाना जा सकता है.
अगर आपको किसी फ़्रेमवर्क के साथ MDC Web का इस्तेमाल करना है, तो MDC-112: MDC को वेब फ़्रेमवर्क के साथ इंटिग्रेट करना पर जाएं.