وب MDC-101: مبانی اجزای مواد (MDC) (وب)

۱. مقدمه

logo_components_color_2x_web_96dp.png

کامپوننت‌های متریال (MDC) به توسعه‌دهندگان در پیاده‌سازی طراحی متریال کمک می‌کنند. MDC که توسط تیمی از مهندسان و طراحان UX در گوگل ایجاد شده است، ده‌ها کامپوننت رابط کاربری زیبا و کاربردی را ارائه می‌دهد و برای اندروید، iOS، وب و Flutter.material.io/develop در دسترس است.

طراحی متریال و کامپوننت‌های متریال برای وب چیستند؟

طراحی متریال سیستمی برای ساخت محصولات دیجیتال جسورانه و زیبا است. با متحد کردن سبک، برندسازی، تعامل و حرکت تحت مجموعه‌ای از اصول و اجزای سازگار، تیم‌های محصول می‌توانند به بزرگترین پتانسیل طراحی خود دست یابند.

برای دسکتاپ و وب موبایل، Material Components Web (MDC Web) طراحی و مهندسی را با کتابخانه‌ای از کامپوننت‌ها برای ایجاد سازگاری در برنامه‌ها و وب‌سایت‌ها متحد می‌کند. کامپوننت‌های وب MDC هر کدام در ماژول‌های گره خود قرار دارند، بنابراین با تکامل سیستم طراحی متریال، این کامپوننت‌ها را می‌توان به راحتی به‌روزرسانی کرد تا پیاده‌سازی پیکسلی بی‌نقص و سازگار و پایبندی به استانداردهای توسعه front-end گوگل تضمین شود. MDC همچنین برای اندروید ، iOS و Flutter در دسترس است.

در این آزمایشگاه کد، شما با استفاده از چندین کامپوننت MDC Web یک صفحه ورود به سیستم خواهید ساخت.

آنچه خواهید ساخت

این آزمایشگاه کد، اولین از سه آزمایشگاه کدی است که شما را در ساخت برنامه‌ای به نام Shrine ، یک وب‌سایت تجارت الکترونیک که لباس و لوازم خانگی می‌فروشد، راهنمایی می‌کند. این آزمایشگاه نشان می‌دهد که چگونه می‌توانید با استفاده از MDC Web، اجزا را برای انعکاس هر برند یا سبکی سفارشی کنید.

در این آزمایشگاه کد، شما یک صفحه ورود برای Shrine خواهید ساخت که شامل موارد زیر است:

  • دو فیلد متنی، یکی برای وارد کردن نام کاربری و دیگری برای وارد کردن رمز عبور
  • دو دکمه، یکی برای «لغو» و دیگری برای «بعدی»
  • نام وب‌سایت (معبد)
  • تصویری از لوگوی Shrine

674d1ca8cfa98c9.png

اجزای وب MDC در این آزمایشگاه کد

  • فیلد متنی
  • دکمه
  • موج دار شدن

آنچه نیاز دارید

  • نسخه جدیدی از Node.js (که به همراه npm ، یک مدیر بسته جاوا اسکریپت، ارائه می‌شود).
  • کد نمونه (که در مرحله بعد دانلود خواهد شد)
  • دانش پایه در مورد HTML، CSS و جاوا اسکریپت

ما همیشه به دنبال بهبود آموزش‌های خود هستیم. سطح تجربه خود در توسعه وب را چگونه ارزیابی می‌کنید؟

تازه کار متوسط ماهر

۲. محیط توسعه خود را تنظیم کنید

اپلیکیشن استارتر codelab را دانلود کنید

برنامه‌ی آغازین در دایرکتوری material-components-web-codelabs-master/mdc-101/starter قرار دارد. قبل از شروع، حتماً با cd به آن دایرکتوری بروید.

... یا آن را از گیت‌هاب کلون کنید

برای کپی کردن این codelab از گیت‌هاب، دستورات زیر را اجرا کنید:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

نصب وابستگی‌های پروژه

از دایرکتوری استارت، دستور زیر را اجرا کنید:

npm install

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

204c063d8fd78f94.png

اگر اینطور نشد، npm audit fix اجرا کنید.

برنامه شروع کننده را اجرا کنید

در همان دایرکتوری، دستور زیر را اجرا کنید:

npm start

webpack-dev-server شروع به کار خواهد کرد. برای مشاهده صفحه، مرورگر خود را به آدرس http://localhost:8080/ هدایت کنید.

17c139dc5a9bebaf.png

موفقیت! کد آغازین صفحه ورود به Shrine باید در مرورگر شما اجرا شود. باید نام "Shrine" و لوگوی Shrine را درست در زیر آن ببینید.

f7e3f354df8d84b8.png

نگاهی به کد بیندازید

متادیتا در 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 که توسط webpack تولید شده است استفاده می‌شود و یک تگ <script> شامل فایل bundle-login.js می‌شود. علاوه بر این، ما normalize.css را برای رندر سازگار در مرورگرهای مختلف و همچنین فونت Roboto از فونت‌های گوگل را نیز در کد خود قرار داده‌ایم.

استایل‌های سفارشی در login.scss

اجزای وب MDC با استفاده از کلاس‌های CSS mdc-* ، مانند کلاس mdc-text-field استایل‌بندی می‌شوند. (وب MDC ساختار DOM خود را به عنوان بخشی از API عمومی خود در نظر می‌گیرد.)

به طور کلی، توصیه می‌شود که با استفاده از کلاس‌های خودتان، تغییرات سبک سفارشی را در کامپوننت‌ها ایجاد کنید. ممکن است متوجه برخی کلاس‌های CSS سفارشی در HTML بالا، مانند shrine-logo ، شده باشید. این سبک‌ها در login.scss تعریف شده‌اند تا سبک‌های اولیه را به صفحه اضافه کنند.

login.scss را باز کنید، استایل‌های زیر را برای صفحه ورود مشاهده خواهید کرد:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

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

۳. فیلدهای متنی اضافه کنید

To begin, we'll add two text fields to our login page, where people will be able to enter their username and password. We'll use the MDC Text Field component, which includes built-in functionality that displays a floating label and activates a touch ripple.

9ad8a7db0b50f07d.png

فیلد متنی MDC را نصب کنید

کامپوننت‌های وب MDC از طریق بسته‌های NPM منتشر می‌شوند. برای نصب پکیج مربوط به کامپوننت فیلد متنی، دستور زیر را اجرا کنید:

npm install @material/textfield@^6.0.0

HTML را اضافه کنید

در index.html ، کد زیر را درون عنصر <form> در بدنه (body) اضافه کنید:

<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>

ساختار DOM فیلد متنی MDC از چندین بخش تشکیل شده است:

  • عنصر اصلی، mdc-text-field
  • زیرعناصر mdc-text-field__ripple, mdc-text-field__input ، mdc-floating-label و mdc-line-ripple

CSS را اضافه کنید

در login.scss ، عبارت import زیر را بعد از import موجود اضافه کنید:

@import "@material/textfield/mdc-text-field";

در همان فایل، استایل‌های زیر را برای ترازبندی و مرکزبندی فیلدهای متنی اضافه کنید:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

جاوا اسکریپت را اضافه کنید

login.js که در حال حاضر خالی است باز کنید. کد زیر را برای وارد کردن و نمونه‌سازی فیلدهای متنی اضافه کنید: 

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

اعتبارسنجی HTML5 را اضافه کنید

فیلدهای متنی با استفاده از ویژگی‌های ارائه شده توسط API اعتبارسنجی فرم HTML5، بیان می‌کنند که آیا ورودی فیلد معتبر است یا حاوی خطا است.

شما باید:

  • ویژگی required را به عناصر mdc-text-field__input در هر دو فیلد متنی نام کاربری و رمز عبور اضافه کنید.
  • ویژگی minlength عنصر mdc-text-field__input از فیلد متنی رمز عبور را روی "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/ رفرش کنید. اکنون باید صفحه‌ای با دو فیلد متنی برای نام کاربری و رمز عبور ببینید!

برای مشاهده‌ی انیمیشن برچسب شناور و انیمیشن موج‌دار شدن خط (خط حاشیه‌ی پایینی که به سمت بیرون موج می‌زند)، روی فیلدهای متنی کلیک کنید:

c0b341e9949a6183.gif

۴. دکمه‌ها را اضافه کنید

در مرحله بعد، دو دکمه به صفحه ورود خود اضافه خواهیم کرد: «لغو» و «بعدی». ما از کامپوننت دکمه MDC به همراه کامپوننت موج‌دار MDC برای تکمیل جلوه موج‌دار جوهر طراحی متریال استفاده خواهیم کرد.

674d1ca8cfa98c9.png

دکمه MDC را نصب کنید

برای نصب بسته مربوط به کامپوننت دکمه، دستور زیر را اجرا کنید: 

npm install @material/button@^6.0.0

HTML را اضافه کنید

در 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> قرار می‌دهیم.

CSS را اضافه کنید

در login.scss ، عبارت import زیر را بعد از importهای موجود اضافه کنید: 

@import "@material/button/mdc-button";

برای ترازبندی دکمه‌ها و اضافه کردن حاشیه به دور آنها، استایل‌های زیر را به login.scss اضافه کنید: 

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

اضافه کردن موج جوهر به دکمه‌ها

وقتی کاربر دکمه‌ای را لمس یا کلیک می‌کند، باید بازخوردی به شکل موج جوهر نمایش داده شود. کامپوننت موج جوهر به جاوا اسکریپت نیاز دارد، بنابراین آن را به صفحه اضافه خواهیم کرد.

برای نصب بسته مربوط به کامپوننت ripple، دستور زیر را اجرا کنید: 

npm install @material/ripple@^6.0.0

در بالای login.js ، عبارت import زیر را اضافه کنید: 

import {MDCRipple} from '@material/ripple';

To instantiate the ripples, add the following to login.js : 

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

از آنجا که نیازی به حفظ ارجاع به نمونه ripple نداریم، نیازی به انتساب آن به یک متغیر نیز نیست.

همین! صفحه را رفرش کنید. با کلیک روی هر دکمه، موجی از جوهر نمایش داده می‌شود.

bb19b0a567977bde.gif

فیلدهای متنی را با مقادیر معتبر پر کنید و دکمه "بعدی" را فشار دهید. شما موفق شدید! شما به کار خود در این صفحه در MDC-102 ادامه خواهید داد.

۵. خلاصه

با استفاده از نشانه‌گذاری‌های اولیه HTML و تنها چند خط CSS و جاوا اسکریپت، کامپوننت‌های متریال برای کتابخانه وب به شما کمک کرده‌اند تا یک صفحه ورود زیبا ایجاد کنید که با دستورالعمل‌های طراحی متریال مطابقت داشته باشد و در همه دستگاه‌ها به طور یکسان ظاهر و رفتار کند.

مراحل بعدی

فیلد متنی، دکمه و موج سه جزء اصلی در کتابخانه وب MDC هستند، اما تعداد بسیار بیشتری وجود دارد! می‌توانید بقیه اجزا را نیز در MDC Web بررسی کنید.

برای آشنایی با کشوی ناوبری و فهرست تصاویر ، می‌توانید به MDC-102: Material Design Structure and Layout مراجعه کنید. از تلاش شما برای استفاده از Material Components متشکریم. امیدواریم از این آزمایشگاه کدنویسی لذت برده باشید!

من توانستم این آزمایشگاه کد را با مقدار قابل توجهی از زمان و تلاش تکمیل کنم.

کاملاً موافقم موافق خنثی مخالف کاملاً مخالفم

من دوست دارم در آینده به استفاده از کامپوننت‌های متریال ادامه دهم.

کاملاً موافقم موافق خنثی مخالف کاملاً مخالفم