کامپوننت‌ های طراحی متریال (Material Design) برای وب – به زبان ساده

۵۰۳ بازدید

آخرین به‌روزرسانی: ۲۶ شهریور ۱۴۰۲

زمان مطالعه: ۵ دقیقه

دانلود PDF مقاله

کامپوننت‌های طراحی متریال (Material Design) برای وب که به اختصار «MDC Web» نامیده می‌شود، به طراحان و توسعه‌دهندگان روشی برای پیاده‌سازی طراحی متریال در وب‌سایت‌ها ارائه می‌کنند. این کامپوننت‌ها از سوی تیمی از مهندسان طراح UX در گوگل توسعه یافته‌اند و امکان تعریف گردش کار توسعه پایدار برای ساخت پروژه‌های وب زیبا و کارآمد را فراهم ساخته‌اند.

فهرست مطالب این نوشته

سرآغاز

استفاده از SASS

MDC Web جانشین Material Design Lite شده است. در این مقاله قصد داریم برخی مفاهیم مقدماتی استفاده از MDC web را معرفی کنیم. دو روش برای include کردن MDC web وجود دارد: از طریق افزودن چند خط کد و وهله سازی از فایل جاوا اسکریپت یا با استفاده از MDC web به عنوان ماژول‌های Node و ساخت یک Sass و کد جاوا اسکریپت و بهره‌گیری از چیزی مانند webpack. ابتدا روش ساده‌ای برای افزودن MDC web را معرفی می‌کنیم.

سرآغاز

قبل از هر چیز، یک صفحه HTML خالی ایجاد کرده و یک دکمه ساده برای آن می‌سازیم:

<button class=”foo-button mdc-button”>Button</button>

این فایل یک کلاس CSS به نام foo-button. دارد. این کلاس همان چیزی است که برای وهله سازی جاوا اسکریپت و تأثیر جلوه مواج Material Design هنگام فشرده شدن یا زدن روی دکمه استفاده می‌شود.

فیلم آموزش متریال دیزاین – طراحی تب ها در اپلیکیشن اندروید با Material Design در فرادرس

کلیک کنید

هنوز هیچ اتفاقی نیفتاده است، زیرا هنوز فایل CSS اصلی اضافه نشده است. می‌توانیم با افزودن یک تگ <link> به بخش head فایل HTML یک لینک به CDN خود اضافه کنیم:

<link rel=”stylesheet” href=”https://unpkg.com/material-components-web/dist/material-components-web.min.css">

این دکمه باید اینک استایل‌دهی شود؛ اما به یک فایل جاوا اسکریپت برای فعال‌سازی جلوه مواج شدن نیاز داریم. برای این کار باید فایل JS را به فایل HTML اضافه کنیم:

<script src=”https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

در بخش نهایی کار باید وهله‌ای از این دکمه بسازیم. زمانی که یک کلاس CSS سفارشی به آن اختصاص می‌دهیم، در فراخوانی خود به آن ارجاع می‌دهیم. به این منظور یک فایل JS ایجاد کرده یا این را به فایل HTML اضافه کنید:

const button = document.querySelector(‘.foo-button’);
mdc.ripple.MDCRipple.attachTo(button);

برای مشاهده مثالی عملی می‌توانید به این لینک (https://codepen.io/mustafa-x/pen/XBaway) مراجعه کنید. در ادامه دکمه خود را اندکی با استفاده از مجموعه آیکون‌های طراحی متریال (+) سفارشی می‌کنیم. ابتدا باید فونت آیکون را include کنیم:

<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons">

سپس دکمه جدیدی را با آیکون مورد علاقه خود اضافه می‌کنیم:

<button class=”bar-button mdc-button”>
<i class=”material-icons mdc-button__icon” aria-hidden=”true”>favorite</i>
Favorite
</button>

اگر بخواهیم این دکمه را مواج بکنیم، باید مانند دفعه پیش وهله‌ای از آن را بسازیم:

const secondButton = document.querySelector(‘.bar-button’);
mdc.ripple.MDCRipple.attachTo(secondButton);

همچنین می‌توان برخی از استایل‌ها را با افزودن سبک‌های کلاس مختلف به آن‌ها ویرایش کرد. ما شش گزینه مختلف برای ایجاد استایل داریم که گزینه پیش‌فرض دکمه مسطح است. همچنین حالت‌های برآمده، بدون ارتفاع، دارای حاشیه، آیکون و فشرده نیز وجود دارند. در این لینک (+) مستندات بیشتری در مورد دکمه‌ها می‌توانید بخوانید.

کد فوق می‌تواند کاملاً تکرارپذیر باشد، چون می‌توان دکمه‌های هر چه بیشتری را اضافه کرد. بنابراین می‌توانیم به یکی از روش‌های زیر آن را بازسازی کنیم:

از طریق ایجاد یک آرایه و سپس اجرای حلقه forEach
با استفاده از ابزاری به نام auto-init.

Foreach

const buttons = document.querySelectorAll(‘.mdc-button’);
for (const button of buttons) {
mdc.ripple.MDCRipple.attachTo(button);
}

Auto init

اگر می‌خواهید یک سایت ساده استاتیک بسازید، Auto init ابزاری عالی محسوب می‌شود. با این وجود، کنترل خود را روی عناصر منفرد از دست می‌دهید و از این رو صرفاً برای سایت‌های استاتیک توصیه می‌شود. باید یک خصوصیت data-* اضافه کنید و سپس autoInit را یک بار در فایل جاوا اسکریپت فراخوانی کنید:

<button class=”mdc-button mdc-button — outlined” data-mdc-auto-init=”MDCRipple”>
Outline
</button>

سپس در فایل JS کد زیر را اضافه کنید:

mdc.autoInit();

استفاده از SASS

برای راه‌اندازی SASS لازم است که Node.js و nmp به صورت محلی نصب شده باشند. زمانی که این موارد نصب شدند، دستور زیر را در ترمینال یا محیط جایگزین آن اجرا کنید:

npm init

بدین ترتیب فایل package.json برای وابستگی‌ها راه‌اندازی می‌شود. واسط خط فرمان از شما می‌خواهد که هر بخش مانند نام و نسخه پروژه خود را پر کنید. به طور جایگزین می‌توانید صرفاً با کپی کردن و ویرایش موارد زیر در فایل package.json این مرحله را طی کنید.

فیلم آموزش پروژه محور بوت استرپ برای طراحی سایت – متریال دیزاین Material Design در Bootstrap + گواهینامه در فرادرس

کلیک کنید

نکته کلیدی افزودن مشخصات آغازین به بخش اسکریپت‌ها است:

{
“name”: “PROJECTNAME”،
“main”: “package.js”،
“scripts”: {
“start”: “webpack-dev-server”
}،
}

اینک باید همه وابستگی‌ها را اضافه کنیم. می‌توانید این دستور را اجرا کرده آن‌ها را به طور خودکار به فایل بسته خود اضافه کنید:

نکته

ما توصیه می‌کنیم از webpack 3 استفاده کنید، چون webpack 4 هنوز به تازگی عرضه شده است. همچنین بهتر است از webpack-dev-server 2 بهره بگیرید، زیرا با webpack 3 سازگار است.

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

دستور فوق وابستگی‌های زیر را نصب می‌کند:

Webpack – بسته SASS و جاوا اسکریپت.
webpack-dev-server – سرور توسعه.
sass-loader – یک فایل SASS را بارگذاری کرده و آن را به صورت CSS کامپایل می‌کند.
node-sass – اتصالی بین Node.js و Sass برقرار می‌کند و وابستگی متقابل برای sass-loader محسوب می‌شود.
css-loader – مسیرهای import@ و ()url را برای CSS پیدا می‌کند.
extract-loader - این پکیج CSS را به صوت فایل css. استخراج می‌کند.
file-loader – فایل css. را به صورت URL عمومی عرضه می‌کند.

برای این که نشان دهیم webpack چگونه SASS ما را بسته‌بندی می‌کند، باید یک فایل index.html داشته باشیم. این فایل HTML باید CSS را include کند. خود CSS از طریق sass-loader تولید می‌شود که فایل‌های Sass را به صورت CSS کامپایل می‌کند. CSS به صورت فایل css. به وسیله extract-loader استخراج می‌شود. این نمونه «hello world» ساده را در فایل index.html ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
<title>Test project</title>
<link rel=”stylesheet” href=”bundle.css”>
</head>
<body>
Hello World
</body>
</html>

سپس فایل Sass ساده‌ای به نام app.scss ایجاد می‌کنیم:

body {
color: red;
}

سپس webpack را طوری پیکربندی می‌کنیم که app.scss را به bundle.css تبدیل کند. به این منظور باید یک فایل جدید webpack.config.js داشته باشید.

module.exports = [{
entry: ‘./app.scss’،
output: {
// This is necessary for webpack to compile،
// but we never use style-bundle.js.
filename: ‘style-bundle.js’،
}،
module: {
rules: [{
test: /\.scss$/،
use: [
{
loader: ‘file-loader’،
options: {
name: ‘bundle.css’،
}،
}،
{ loader: ‘extract-loader’ }،
{ loader: ‘css-loader’ }،
{ loader: ‘sass-loader’ }،
]
}]
}،
}];

برای تست پیکربندی webpack دستور زیر را اجرا کنید:

npm start

سپس آدرس http://localhost:8080 را در مرورگر وب خود باز کنید. در این زمان متن «Hello World» را به رنگ قرمز مشاهده می‌کنید. اگر تغییری در فایل CSS ایجاد کنید، مثلاً رنگ متن را از قرمز به آبی تبدیل کنید و سپس مرورگر را رفرش نمایید، می‌بینید که تغییر بی‌درنگ اعمال می‌شود.

افزودن کامپوننت‌ها

اگر سرور شما همچنان در حال اجرا است، آن را فعلاً متوقف کنید. اینک که همه چیز راه‌اندازی شده است می‌توانیم برخی کامپوننت‌های متریال را اضافه کنیم. ابتدا باید وابستگی‌ها را در خط فرمان اضافه کنیم:

npm install --save-dev @material/button

باید به app.scss بگوییم که فایل‌های SASS را برای material/button@ ایمپورت کند. همچنین می‌توانیم از mixin-های Sass برای سفارشی‌سازی دکمه استفاده کنیم. نسخه «Hello World» خود از app.scss را با کد زیر تعویض کنید:

@import “@material/button/mdc-button”;
.foo-button {
@include mdc-button-ink-color(teal);
@include mdc-states(teal);
}

همچنین باید sass-loader را پیکربندی کنیم تا ایمپورت‌های @material مورد استفاده از سوی MDC Web را درک کند. با تغییر دادن { loader: ‘sass-loader’ } به صورت زیر فایل webpack.config.js خود را به‌روزرسانی کنید:

{
loader: ‘sass-loader’،
options: {
includePaths: [‘./node_modules’]
}
}

جهت افزودن سبک‌های خاص ارائه شده به فایل‌های SASS باید autoprefixer را از طریق PostCSS پیکربندی کنیم.

ما به همه این وابستگی‌های Node نیاز داریم:

Autoprefixer: به تجزیه css می‌پردازد و پراکسی‌های ارائه دهنده را به قواعد CSS اضافه می‌کند.
postcss-loader: یک Loader برای Webpack که همراه با autoprefixer استفاده می‌شود.

می‌توان همه این موارد را با اجرای این دستور نصب کرد:

npm install --save-dev autoprefixer postcss-loader

و autoprefixer در بالای فایل webpack.config.js قرار می‌گیرد:

const autoprefixer = require(‘autoprefixer’);

سپس postcss-loader را با استفاده از autoprefixer به عنوان یک افزونه اضافه می‌کنیم:

{ loader: ‘extract-loader’ }،
{ loader: ‘css-loader’ }،
{ loader: ‘postcss-loader’،
options: {
plugins: () => [autoprefixer()]
}
}،

اکنون می‌توانیم نشانه‌گذاری مورد استفاده در فایل استاتیک HTML را از آغاز include می‌کنیم. فایل index.html را طوری به‌روزرسانی می‌کنیم که نشانه‌گذاری دکمه MDC را شامل شود و کلاس foo-button را به آن عنصر اضافه می‌کنیم:

<button class=”mdc-button foo-button”>
Favorite
</button>

اکنون npm را بار دیگر آغاز می‌کنیم و http://localhost:8080 را باز می‌کنیم. در این زمان باید یک دکمه متریال دیزاین را ببینید. شما می‌توانید با مراجعه به سایت مستندات این پروژه (+) اطلاعات بیشتری در خصوص آن کسب کنید.

اگر علاقه‌مند به یادگیری بیشتر در این زمینه هستید، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

محصول، خدمات یا برند خود را در مجله فرادرس معرفی کنید.

کلیک کنید

بر اساس رای ۲ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

dev-channel

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.