۱. مقدمه
کامپوننتهای متریال (MDC) به توسعهدهندگان در پیادهسازی طراحی متریال کمک میکنند. MDC که توسط تیمی از مهندسان و طراحان UX در گوگل ایجاد شده است، دهها کامپوننت رابط کاربری زیبا و کاربردی را ارائه میدهد و برای اندروید، iOS، وب و Flutter.material.io/develop در دسترس است. |
کامپوننتهای متریال برای وب (MDC Web) مستقل از فریمورک هستند و با استفاده از جاوااسکریپت معمولی ساخته شدهاند. این امر به MDC Web کمک میکند تا به طور یکپارچه با فرآیند توسعه شما کار کند. این کامپوننتها را میتوان در صورت نیاز نصب کرد تا به بهبود طراحی چابک در برنامه موجود شما کمک کند.
آنچه خواهید ساخت
در این آزمایشگاه کد، برخی از اجزای موجود در یک فرم را با اجزای ارائه شده توسط MDC Web جایگزین خواهید کرد:
اجزای وب MDC در این آزمایشگاه کد
- دکمه
- انتخاب کنید
- فیلد متنی
آنچه نیاز دارید
- نسخه جدیدی از Node.js (که به همراه npm ، یک مدیر بسته جاوا اسکریپت، ارائه میشود).
- کد نمونه (که در مرحله بعد دانلود خواهد شد)
- دانش پایه در مورد HTML، CSS و جاوا اسکریپت
سطح تجربه خود در توسعه وب را چگونه ارزیابی میکنید؟
۲. محیط توسعه خود را تنظیم کنید
اپلیکیشن استارتر codelab را دانلود کنید
برنامهی آغازین در دایرکتوری material-components-web-codelabs-master/mdc-111/starter قرار دارد. قبل از شروع، حتماً با cd به آن دایرکتوری بروید.
... یا آن را از گیتهاب کلون کنید
برای کپی کردن این codelab از گیتهاب، دستورات زیر را اجرا کنید:
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/ هدایت کنید.
موفقیت! شما باید فرم آدرس ارسال برنامه را ببینید:
۳. دکمه را بهروزرسانی کنید
دکمه MDC را نصب کنید
برای بستن سرور توسعه، Ctrl + C را فشار دهید. سپس، بسته NPM دکمه MDC را نصب کرده و سرور را مجدداً راهاندازی کنید:
npm install @material/button npm start
CSS را وارد کنید
در بالای _theme.scss ، بلوک .crane-button { ... } را حذف کنید و کد زیر را به جای آن اضافه کنید:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
بهروزرسانی نشانهگذاری
در index.html ، کلاس crane-button را از عنصر <button> حذف کنید، کلاسهای mdc-button و mdc-button--raised را اضافه کنید و برچسب را درون یک عنصر <span> با کلاس mdc-button__label قرار دهید:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
موج را اضافه کنید
دکمههای MDC را میتوان بدون جاوا اسکریپت استفاده کرد. با این حال، اضافه کردن یک موج تعاملی به دکمه، تجربه کاربری غنیتری ایجاد میکند.
برای بستن سرور توسعه، Ctrl + C را فشار دهید. سپس دستور زیر را اجرا کنید:
npm install @material/ripple npm start
عبارت import زیر را به بالای app.js اضافه کنید:
import {MDCRipple} from '@material/ripple';
برای نمونهسازی موج روی دکمه، کد زیر را به انتهای app.js اضافه کنید:
new MDCRipple(document.querySelector('.mdc-button'));
فونت Roboto را وارد کنید
به طور پیشفرض، متریال دیزاین از Roboto برای فونتهای کامپوننت استفاده میکند.
در index.html ، فونت Roboto Web را با اضافه کردن کد زیر به عنصر <head> وارد کنید:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
صفحه را دوباره بارگذاری کنید، و باید چیزی شبیه به این را ببینید:
این دکمه اکنون هنگام فشار دادن، یک جلوه موجدار ظریف را به عنوان بازخورد بصری نمایش میدهد.
۴. بهروزرسانی عنصر select
کامپوننت MDC Select یک عنصر <select> بومی HTML را در بر میگیرد. از آن در هر جایی که معمولاً از <select> استفاده میکنید، استفاده کنید. بیایید فیلد "State" را بهروزرسانی کنیم.
ماژول MDC Node را نصب کنید
برای بستن سرور توسعه، Ctrl + C را فشار دهید. سپس دستور زیر را اجرا کنید:
npm install @material/select npm start
CSS را وارد کنید
کد زیر را درست بعد از دکمهی import به _theme.scss اضافه کنید:
@import "@material/select/mdc-select";
بهروزرسانی نشانهگذاری
عنصر <select> را در index.html پیدا کنید. کلاس 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 را وارد کنید
عبارت import زیر را به بالای app.js اضافه کنید:
import {MDCSelect} from '@material/select';
برای نمونهسازی select، کد زیر را به انتهای app.js اضافه کنید:
new MDCSelect(document.querySelector('.mdc-select'));
صفحه را دوباره بارگذاری کنید، اکنون باید به این شکل باشد:
کامپوننت MDC Select فهرستی از گزینهها را با فرمتی آشنا، اما با ظاهری مدرن، به کاربر ارائه میدهد.
۵. فیلدهای متنی را بهروزرسانی کنید
فیلدهای متنی طراحی متریال نسبت به عناصر ساده <input> از نظر کاربردپذیری پیشرفتهای چشمگیری داشتهاند. آنها طوری طراحی شدهاند که به راحتی در محتوای پیچیده قابل شناسایی باشند و هنگام تعامل کاربر با آنها، بازخورد بصری ظریفی را نشان دهند.
ماژول MDC Node را نصب کنید
برای بستن سرور توسعه، Ctrl + C را فشار دهید. سپس دستور زیر را اجرا کنید:
npm install @material/textfield npm start
CSS را اضافه کنید
کد زیر را درست بعد از دستور select import به فایل _theme.scss اضافه کنید:
@import "@material/textfield/mdc-text-field";
بهروزرسانی نشانهگذاری
در index.html ، عنصر <input> مربوط به فیلد "Name" را پیدا کنید. کلاس 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>
در نهایت، هر 3 عنصر را با موارد زیر بپوشانید:
<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>
اکنون میتوانید استایلهای .crane-label و .crane-input را از _theme.scss که دیگر استفاده نمیشوند، حذف کنید.
JS را وارد کنید
عبارت import زیر را به بالای app.js اضافه کنید:
import {MDCTextField} from '@material/textfield';
برای نمونهسازی فیلدهای متنی، کد زیر را به انتهای app.js اضافه کنید:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
صفحه را دوباره بارگذاری کنید، اکنون باید به این شکل باشد:
فیلدهای متنی اکنون همگی برای استفاده از قالببندی متریال بهروزرسانی شدهاند.
۶. خلاصه
شما برخی از اجزای رایج (فیلدهای متنی، select و button) را بدون طراحی مجدد کامل برنامه خود جایگزین کردهاید. کار عالی!
از دیگر اجزایی که میتوانند تفاوت بزرگی ایجاد کنند میتوان به نوار برنامه بالا و کشوی ناوبری اشاره کرد.
مراحل بعدی
شما میتوانید با مراجعه به کاتالوگ وب MDC، اجزای بیشتری را در MDC Web بررسی کنید.
اگر به استفاده از MDC Web با یک چارچوب خاص علاقهمند هستید، به MDC-112: ادغام MDC با چارچوبهای وب مراجعه کنید.