این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

وب MDC-111: ترکیب اجزای مواد در پایگاه کد شما (وب)

1. مقدمه

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

اجزای متریال برای وب (MDC Web) چارچوب-آگنوستیک هستند و با استفاده از جاوا اسکریپت معمولی ساخته شده اند. این کمک می کند تا وب MDC به طور یکپارچه با فرآیند توسعه شما کار کند. این مؤلفه‌ها را می‌توان در صورت نیاز برای کمک به بهبود طراحی چابک در برنامه موجود نصب کرد.

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

در این لبه کد، برخی از اجزای موجود را به شکلی با اجزای ارائه شده توسط MDC Web جایگزین خواهید کرد:

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

دکمه
انتخاب کنید
فیلد متنی

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

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

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

تازه کار

متوسط

مسلط

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

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

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

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

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

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

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

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

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

موفقیت! باید فرم آدرس ارسال برنامه را ببینید:

3. دکمه را به روز کنید

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

Ctrl + C را فشار دهید تا سرور توسعه را از بین ببرید. سپس بسته MDC Button NPM را نصب کرده و سرور را مجددا راه اندازی کنید:

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

صفحه را دوباره بارگیری کنید، و باید چیزی شبیه به این را ببینید:

این دکمه اکنون هنگام فشار دادن، جلوه موج دار ظریف را به عنوان بازخورد بصری نشان می دهد.

4. عنصر Select را به روز کنید

جزء MDC Select یک عنصر بومی <select> HTML را می پوشاند. از آن در هر جایی که معمولاً از یک <select> استفاده می کنید استفاده کنید. بیایید فیلد "State" را به روز کنیم.

ماژول MDC Node را نصب کنید

Ctrl + C را فشار دهید تا سرور توسعه را از بین ببرید. سپس اجرا کنید:

npm install @material/select
npm start

CSS را وارد کنید

درست پس از وارد کردن دکمه، موارد زیر را به _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';

برای نمونه سازی انتخاب، موارد زیر را به پایین app.js اضافه کنید:

new MDCSelect(document.querySelector('.mdc-select'));

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

مؤلفه MDC Select فهرستی از گزینه ها را در قالبی آشنا، اما با سبکی مدرن برای کاربر ارائه می دهد.

5. فیلدهای متنی را به روز کنید

فیلدهای متنی طراحی متریال نسبت به عناصر <input> ساده مزایای قابل استفاده زیادی دارند. آنها به گونه ای طراحی شده اند که به راحتی در محتوای پیچیده شناسایی شوند و هنگامی که کاربر با آنها در تعامل است، بازخورد بصری ظریفی را نشان می دهد.

ماژول MDC Node را نصب کنید

Ctrl + C را فشار دهید تا سرور توسعه را از بین ببرید. سپس اجرا کنید:

npm install @material/textfield
npm start

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

فقط پس از انتخاب 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);
});

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

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

6. خلاصه کنید

برخی از اجزای رایج (فیلدهای نوشتاری، انتخاب و دکمه) را بدون انجام طراحی مجدد کامل برنامه خود جایگزین کرده اید. کار عالی!

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

مراحل بعدی

با مراجعه به کاتالوگ وب MDC می توانید حتی اجزای بیشتری را در MDC Web کاوش کنید.

اگر علاقه مند به استفاده از MDC Web با یک چارچوب خاص هستید، به MDC-112: ادغام MDC با Web Frameworks مراجعه کنید.

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

کاملا موافقم

موافقم

خنثی

مخالفت کنید

به شدت مخالفم

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

کاملا موافقم

موافقم

خنثی

مخالفت کنید

به شدت مخالفم