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

وب MDC-103: طرح زمینه مواد با رنگ، شکل، ارتفاع و نوع (وب)

1. مقدمه

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

در Codelabs MDC-101 و MDC-102، از Material Components (MDC) برای ساختن اصول اولیه اپلیکیشنی به نام Shrine استفاده کردید، یک برنامه تجارت الکترونیک که لباس و کالاهای خانگی می فروشد. جریان کاربر این برنامه با یک صفحه ورود شروع می شود، که سپس کاربر را به صفحه اصلی حاوی محصولات می برد.

طراحی متریال اخیراً گسترش یافته است تا به طراحان و توسعه دهندگان انعطاف بیشتری برای بیان برند محصول خود بدهد. در این آزمایشگاه کد، از MDC برای سفارشی کردن برنامه Shrine استفاده می‌کنید تا سبک منحصر به فرد برند را به روش‌های بیشتری نسبت به قبل منعکس کند.

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

در این کد لبه، شما Shrine را سفارشی می‌کنید تا برند آن را با استفاده از:

رنگ
تایپوگرافی
ارتفاع
شکل
طرح بندی

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

موضوع
تایپوگرافی
ارتفاع
لیست تصاویر

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

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

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

تازه کار

متوسط

مسلط

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

از MDC-102 ادامه می دهید؟

اگر MDC-102 را تکمیل کرده اید، کد شما باید برای این کد لبه آماده باشد. به مرحله 3 بروید: رنگ را تغییر دهید .

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

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

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

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

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

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

از دایرکتوری starter material-components-web-codelabs/mdc-103/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/ ببرید.

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

در حالی که کشوی ناوبری کاربردی است، بیایید با تغییر رنگ، ارتفاع و تایپوگرافی آن را با برند Shrine مطابقت دهیم.

3. رنگ را تغییر دهید

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

بیایید رنگ کشوی پیمایش برنامه Shrine را تغییر دهیم تا آن طرح رنگی را منعکس کند.

رنگ های طرح زمینه را نادیده بگیرید

یک فایل جدید با نام _variables.scss ایجاد کنید که حاوی موارد زیر باشد:

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

سپس آن را در بالای _common.scss وارد کنید:

@import "./variables";

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

@import "@material/ripple/mixins";

سپس استایل های زیر را اضافه کنید و کلاس .shrine-drawer را ایجاد کنید:

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

صفحه را در http://localhost:8080/home.html بازخوانی کنید. صفحه اصلی شما اکنون باید به شکل زیر باشد:

بیایید رنگ صفحه ورود به سیستم را تغییر دهیم تا با طرح رنگ ما مطابقت داشته باشد.

در login.scss ، خطوط زیر را اضافه کنید:

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

همچنین، فراخوان های mixin زیر را در انتخابگر CSS .username, .password اضافه کنید:

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

صفحه را در http://localhost:8080/ بازخوانی کنید. اکنون صفحه ورود شما باید به شکل زیر باشد:

4. تایپوگرافی و سبک های برچسب را تغییر دهید

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

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

npm install @material/typography

CSS را برای تایپوگرافی اضافه کنید

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

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

سپس فراخوانی mixin زیر را به کلاس shrine-title اضافه کنید:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

در مرحله بعد، بیایید به آیتم های کشو سبک دهیم.

یک جداکننده خط اضافه کنید

در home.html موارد زیر را بلافاصله بعد از عنصر <a ...>Featured</a> اضافه کنید:

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

استایل های زیر را به home.scss اضافه کنید:

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

آیتم ها و برچسب های تصویر را تنظیم کنید

برای تنظیم آیتم‌ها و برچسب‌ها، سبک‌های زیر را به home.scss در انتخابگر .product-list اضافه کنید:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

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

5. ارتفاع را تنظیم کنید

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

برای نصب پکیج Elevation، اجرا کنید:

npm install @material/elevation

عبارت import را اضافه کنید

در home.scss ، خط زیر را بعد از آخرین دستور import اضافه کنید:

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

لیست تصاویر را با یک div جدید بپیچید

در home.html ، نشانه گذاری زیر را در اطراف عنصر <ul> اضافه کنید:

<div class="shrine-body">
 <ul...>
</div>

تغییر ارتفاع با استفاده از میکسین Sass

در home.scss موارد زیر را اضافه کنید:

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

چشمگیر! شما یک سایه به لبه سمت چپ سطح سفید در پشت آیتم های لیست تصاویر اضافه کرده اید، به طوری که به نظر می رسد کمی بالای ناوبری شناور است.

6. چیدمان را تغییر دهید

در مرحله بعد، بیایید طرح‌بندی را تغییر دهیم تا تصاویر را با نسبت‌ها و اندازه‌های مختلف نشان دهیم، به طوری که هر تصویر در مقابل عکس‌های دیگر منحصربه‌فرد به نظر برسد.

HTML را اصلاح کنید

در home.html ، عنصر mdc-image-list را به روز کنید تا شامل کلاس mdc-image-list--masonry باشد:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

اضافه کردن تصاویر

در home.html ، ویژگی src هر عنصر img را تغییر دهید تا با تصاویر موجود در پوشه assets مطابقت داشته باشد. سپس، متن برچسب را برای هر تصویر به روز کنید. پس از تکمیل، باید به شکل زیر باشد:

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Weave keyring</span>
        </div>
      </li>
    </ul>

CSS را به روز کنید

در home.scss ، mixin mdc-image-list-standard-columns(4) حذف کنید و آن را با mixin زیر جایگزین کنید:

@include mdc-image-list-masonry-columns(4);

سپس مقادیر padding زیر را به کلاس product-list در home.scss اضافه کنید:

.product-list {
  ...
  padding: 80px 100px 0;
}

کد شما اکنون باید با کد موجود در پوشه complete/ مطابقت داشته باشد.

7. تم دیگری را امتحان کنید

رنگ یک راه قدرتمند برای بیان برند شما است و یک تغییر کوچک در رنگ می تواند تأثیر زیادی بر تجربه کاربری شما داشته باشد. برای آزمایش این موضوع، بیایید ببینیم اگر طرح رنگ برند کاملاً متفاوت بود، Shrine چگونه به نظر می رسید.

CSS را اصلاح کنید

در _variables.scss ، متغیرهایی را که برای تم اصلی اعلام کردید با موارد زیر جایگزین کنید:

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

در login.scss ، mixins را در انتخابگر .username, .password حذف کنید. باید به شکل زیر باشد:

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

علاوه بر این، گزینه mdc-button-ink-color mixin را در کلاس .cancel حذف کنید:

در home.scss ، قانون زیر را به کلاس .home اضافه کنید:

background-color: $mdc-theme-background;

در انتخابگر .shrine-logo-drawer ، ویژگی fill را جایگزین کنید تا رنگ اصلی باشد:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

به طور مشابه، در انتخابگر .shrine-title ویژگی color را روی رنگ اصلی تنظیم کنید:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

در نهایت، مخلوط mdc-elevation را که قبلاً در زیر انتخابگر .shrine-body استفاده شده بود، بردارید.

بسازید و اجرا کنید. اکنون موضوع جدید باید در مرورگر شما ظاهر شود.

اکنون به http://localhost:8080/home.html بروید تا تغییرات صفحه home.html را ببینید.

8. خلاصه کنید

اکنون اپلیکیشنی ساخته اید که شبیه مشخصات طراح شما است.

مراحل بعدی

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

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

کاملا موافقم

موافقم

خنثی

مخالف

به شدت مخالفم

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