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

1. مقدمه

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 یک صفحه ورود ایجاد خواهید کرد.

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

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

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

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

کدهای مربوطه را می توان در این آدرس یافت:

• MDC-102: ساختار و چیدمان طراحی مواد
• MDC-103: طرح زمینه طراحی متریال با رنگ، شکل، ارتفاع و نوع

در پایان MDC 103، یک وب سایت به شکل زیر ایجاد خواهید کرد:

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

• فیلد متنی
• دکمه
• ریپل

در این کد لبه، شما از اجزای پیش فرض ارائه شده توسط MDC Web استفاده خواهید کرد. شما یاد خواهید گرفت که آنها را در MDC-103 سفارشی کنید: طرح زمینه طراحی مواد با رنگ، شکل، ارتفاع و نوع .

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

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

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

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

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

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

دانلود برنامه استارت

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

به پسوند -master در نام دایرکتوری ریشه توجه کنید. اگر برنامه استارتر را از دکمه بالا دانلود می کنید، لطفاً پسوند -master هر زمان که به دایرکتوری ریشه برای بقیه این کد لبه ارجاع داده شد اضافه کنید.

... یا آن را از GitHub شبیه سازی کنید

برای شبیه سازی این کد لبه از GitHub، دستورات زیر را اجرا کنید:

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

برای راهنمایی بیشتر: شبیه سازی یک مخزن از GitHub

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

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

npm install

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

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

MDC Web از یک پیش پردازنده CSS به نام Sass استفاده می کند. اگر از یک پیش پردازنده CSS متفاوت (یا اصلاً هیچ) استفاده می کنید، اشکالی ندارد! می توانید با نصب sass CLI یا استفاده از یک افزونه (به عنوان مثال، sass-loader برای Webpack، gulp-sass برای Gulp، یا grunt-sass برای Grunt) در زنجیره ابزار ساخت خود، از Sass در کنار پیش پردازنده فعلی خود استفاده کنید.

برای اینکه کد ما در مرورگرهای قدیمی‌تر مانند IE 11 کار کند، ما از یک ترانسپایلر به نام Babel استفاده می‌کنیم تا نحو ES2015 جاوا اسکریپت MDC Web را به نحو جاوا اسکریپت ES5 تبدیل کنیم.

ما از وب پک برای بسته بندی فایل های خود و ارائه خدمات محلی به سایت خود استفاده خواهیم کرد. پیکربندی بسته وب برای این پروژه قبلاً برای شما در فایل webpack.config.js تنظیم شده است. برای جزئیات بیشتر در مورد نحوه پیکربندی، به راهنمای شروع مراجعه کنید.

برنامه استارتر را اجرا کنید

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

npm start

اجرای npm start در یک برگه یا پنجره ترمینال جداگانه مفید است، بنابراین سرور محلی را می توان در حالی که کد را تغییر می دهیم در حال اجرا نگه داشت.

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

اگر نتوانستید npm install یا npm start با موفقیت اجرا کنید، محیط توسعه دهنده خود را متوقف کرده و عیب یابی کنید.

موفقیت! کد شروع برای صفحه ورود به سایت 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 با استفاده از Sass ، یک زبان برنامه‌نویسی برای CSS، سبک‌دهی می‌شوند. Sass با استفاده از بسته وب در CSS معمولی کامپایل می شود. فایل‌های Sass در وب MDC به صورت سینتکس به نام SCSS نوشته می‌شوند و دارای پسوندهای فایل هستند که به .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;
}

ممکن است متوجه home.scss و home.js نیز شده باشید. اینها در Codelab MDC-102 استفاده خواهند شد و در حال حاضر می توان آنها را نادیده گرفت.

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

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

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

فیلدهای متنی طراحی متریال برای بهبود انعطاف‌پذیری برند، با پیشرفت‌هایی که با تحقیقات گسترده تجربه کاربر (UX) برای قابلیت استفاده و طراحی بصری بهتر پشتیبانی می‌شوند، بسیار افزایش یافته‌اند.

درباره فیلدهای متنی بهبودیافته در مقاله راهنمای مواد بیشتر بیاموزید.

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

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

npm install @material/textfield@^6.0.0

همچنین می‌توانید تمام اجزای وب MDC را به‌طور هم‌زمان با اجرای:

npm install material-components-web@^6.0.0

اطلاعات بیشتر در مورد استفاده از بسته وب اصلی MDC را اینجا ببینید.

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

در index.html موارد زیر را داخل عنصر <form> در بدنه اضافه کنید:

<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

توجه: زیرخط دوتایی ( __ ) و خط فاصله دوگانه ( -- ) در این نام‌های انتخابگر از الگوی BEM ، روشی برای ساختار معنایی کلاس‌های CSS استفاده می‌شود. MDC Web از نسخه اصلاح شده این الگو پیروی می کند، همانطور که در این لبه کد نشان داده شده است.

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

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

درباره فیلدهای متنی:

فیلد متنی MDC از عنصر <input> HTML بومی استفاده می کند، بنابراین می توان آن را با عناصر بومی <form> در HTML استفاده کرد.

• فیلد متنی MDC حالت های شناور و فوکوس را به طور خودکار منعکس می کند.
• فیلد متنی MDC شامل بسیاری از ویژگی‌ها و انواع سبک‌ها، مانند متن کمکی، جفت کردن نمادها، تغییر سبک مشخص شده و یک ناحیه متنی است. آنها را اینجا بررسی کنید!

4. دکمه ها را اضافه کنید

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

دکمه 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>

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

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

توجه : مؤلفه MDC Button در وب MDC به جاوا اسکریپت نیاز ندارد و استفاده از آن را با اتصال شبکه محدود سبک‌تر و سریع‌تر می‌کند.

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@^6.0.0

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

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

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

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

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

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

سبک های بسیاری دیگر از دکمه MDC وجود دارد، مانند بدون بالا و مشخص. آنها را اینجا بررسی کنید!

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

توجه: برای اهداف این تمرین، فرم از طریق HTTP GET ارسال می شود و هیچ پردازش سمت سرور وجود ندارد. هر سایت تولیدی یا برنامه‌ای از HTTP POST (با افزودن method="POST" به عنصر <form> ) برای ارسال به نقطه پایانی سرور و تأیید اطلاعات ورود استفاده می‌کند.

5. خلاصه کنید

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

برنامه تکمیل شده MDC-101 در این فهرست موجود است: material-components-web-codelabs/mdc-101/complete

می توانید نسخه صفحه خود را در برابر صفحه موجود در آن دایرکتوری آزمایش کنید. فراموش نکنید که ابتدا npm install در آن دایرکتوری اجرا کنید.

مراحل بعدی

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

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

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

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

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

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