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

logo_components_color_2x_web_96dp.png

Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter در دسترس است.

material.io/develop

طراحی متریال و اجزای متریال برای وب چیست؟

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

برای وب دسکتاپ و موبایل، Material Components Web (MDC Web) طراحی و مهندسی را با کتابخانه ای از مؤلفه ها برای ایجاد ثبات در بین برنامه ها و وب سایت ها متحد می کند. اجزای وب MDC هر کدام در ماژول‌های گره مخصوص به خود زندگی می‌کنند، بنابراین با تکامل سیستم طراحی مواد، می‌توان این مؤلفه‌ها را به راحتی به‌روزرسانی کرد تا از پیاده‌سازی کامل پیکسلی و پایبندی به استانداردهای توسعه فرانت‌اند Google اطمینان حاصل شود. MDC همچنین برای Android ، iOS و Flutter در دسترس است.

در این لبه کد، شما با استفاده از چندین مؤلفه MDC Web یک صفحه ورود ایجاد خواهید کرد.

چیزی که خواهی ساخت

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

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

  • دو فیلد متنی، یکی برای وارد کردن نام کاربری و دیگری برای رمز عبور
  • دو دکمه، یکی برای "لغو" و دیگری برای "بعدی"
  • نام وب سایت (حرم)
  • تصویری از لوگوی حرم

اجزای وب MDC در این کد لبه

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

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

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

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

تازه کار حد واسط مسلط

برنامه codelab starter را دانلود کنید

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

برنامه شروع در دایرکتوری 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/ ببرید.

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

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

فراداده در 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 از فونت های Google را اضافه می کنیم.

سبک های سفارشی در login.scss

اجزای وب MDC با استفاده از mdc-* CSS، مانند کلاس mdc-text-field ، سبک‌دهی می‌شوند. (MDC Web ساختار 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;
}

اکنون که با کد شروع آشنا شدید، بیایید اولین مؤلفه خود را پیاده سازی کنیم.

برای شروع، ما دو فیلد متنی را به صفحه ورود خود اضافه می کنیم، جایی که افراد می توانند نام کاربری و رمز عبور خود را وارد کنند. ما از مؤلفه MDC Text Field استفاده خواهیم کرد، که شامل عملکرد داخلی است که یک برچسب شناور را نمایش می دهد و یک موج لمسی را فعال می کند.

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

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

npm install @material/textfield

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

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

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

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

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

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

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

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

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

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

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" تنظیم کنید.

دو <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/ بازخوانی کنید. اکنون باید صفحه ای با دو فیلد متنی برای نام کاربری و رمز عبور مشاهده کنید!

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

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

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

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

npm install @material/button

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

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

برای دکمه "لغو"، ما از سبک دکمه پیش فرض استفاده می کنیم. با این حال، دکمه "Next" از یک نوع سبک برجسته استفاده می کند که با کلاس mdc-button--raised نشان داده می شود.

برای اینکه بعداً آنها را به راحتی تراز کنیم، دو عنصر mdc-button را در یک عنصر <div> قرار می دهیم.

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

در login.scss ، عبارت 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;
}

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

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

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

npm install @material/ripple

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

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

برای نمونه سازی امواج، موارد زیر را به login.js اضافه کنید:

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

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

خودشه! صفحه را رفرش کنید. هنگامی که روی هر دکمه کلیک می کنید، یک موج جوهر نمایش داده می شود.

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

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

مراحل بعدی

Text Field، Button و Ripple سه جزء اصلی در کتابخانه وب MDC هستند، اما موارد بسیار بیشتری نیز وجود دارند! همچنین می‌توانید بقیه مؤلفه‌ها را در MDC Web کاوش کنید.

می توانید به MDC-102: Material Design Structure and Layout مراجعه کنید تا در مورد کشوی پیمایش و لیست تصاویر اطلاعات کسب کنید. از اینکه Material Components را امتحان کردید متشکریم. امیدواریم از این کد لبه لذت برده باشید!

من توانستم با صرف زمان و تلاش معقول این کد لبه را تکمیل کنم

کاملا موافقم موافق خنثی مخالف بودن کاملا مخالف

من می‌خواهم در آینده از Material Component استفاده کنم

کاملا موافقم موافق خنثی مخالف بودن کاملا مخالف