وب MDC-102: ساختار و چیدمان مواد (وب)

1. مقدمه

logo_components_color_2x_web_96dp.png

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

در Codelab MDC-101، شما از دو جزء مواد (MDC) برای ایجاد رابط کاربری صفحه ورود استفاده کردید: فیلد متن و دکمه. حالا بیایید با اضافه کردن ناوبری، ساختار و داده این موضوع را گسترش دهیم.

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

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

  • کشوی ناوبری
  • یک لیست تصویری پر از محصولات

e2f359c254988d75.png

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

  • کشو
  • لیست تصاویر

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

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

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

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

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

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

اگر MDC-101 را تکمیل کرده اید، کد شما باید برای این کد لبه آماده شود. به مرحله 3 بروید: یک کشوی پیمایش اضافه کنید.

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

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

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

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

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

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

دایرکتوری فعلی شما باید material-components-web-codelabs/mdc-102/starter. از آنجا دستور زیر را اجرا کنید:

npm install

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

23003b0e5fdf9077.png

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

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

npm start

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

4e04758051693865.png

موفقیت! شما باید صفحه ورود به حرم را از آزمایشگاه کد MDC-101 ببینید.

6c206785707bee2e.png

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

3. یک کشوی ناوبری اضافه کنید

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

الگوهای ناوبری Material Design درجه بالایی از قابلیت استفاده را ارائه می دهند. کشوی ناوبری مواد، ناوبری و دسترسی سریع به سایر اقدامات را فراهم می کند. بیایید یکی اضافه کنیم.

MDC Drawer and List را نصب کنید

برای نصب پکیج ها برای جزء کشو، اجرا کنید:

npm install @material/drawer @material/list

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

در home.html ، به جای "شما این کار را کردید!" با نشانه گذاری زیر برای کشو و موارد آن: 

<aside class="mdc-drawer shrine-drawer">
  <div class="mdc-drawer__header">
    <svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
      <g>
        <g>
          <path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
             M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
        </g>
        <rect fill="none" width="24" height="24"/>
      </g>
    </svg>
    <h1 class="shrine-title">SHRINE</h1>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
        <span class="mdc-list-item__text">Featured</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Apartment</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Accessories</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Shoes</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Tops</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Bottoms</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Dresses</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">My Account</span>
      </a>
    </nav>
  </div>
</aside>

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

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

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

در پایین home.scss ، سبک‌های زیر را اضافه کنید:

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

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

برای پیمایش مناسب صفحه کلید، باید فهرست MDC را در داخل کشوی پیمایش نمونه سازی کنیم. home.js که در حال حاضر خالی است باز کنید و کد زیر را اضافه کنید:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

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

9c145acccbc28214.png

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

4. تصاویر را با برچسب های متنی اضافه کنید

اکنون که برنامه ما ساختاری دارد، بیایید محتوا را با قرار دادن آن در لیست تصاویر سازماندهی کنیم.

لیست تصاویر MDC را نصب کنید

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

npm install @material/image-list

HTML را برای یک لیست با یک آیتم اضافه کنید

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

در home.html ، HTML زیر را بعد از پایان عنصر <aside> اضافه کنید:

<ul class="mdc-image-list product-list">
  <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>

این لیست شامل یک کلاس اضافی، product-list که سبک های سفارشی را هم در این آموزش و هم در MDC-103 اعمال می کند.

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

ابتدا، در home.scss ، پس از وارد کردن های موجود، یک import برای سبک های مؤلفه لیست تصویر اضافه کنید:

@import "@material/image-list/mdc-image-list";

بعد، سبک های زیر را بعد از سبک های اولیه صفحه اصلی اضافه کنید:

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

این سبک‌ها به فهرست تصاویر دستور می‌دهند تا تصاویر را در چهار ستون نمایش دهد و اطمینان حاصل شود که فهرست تصاویر مستقل از کشو حرکت می‌کند.

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

5362b330204ffd58.png

یک لیست تصویر برای نمایش بسیاری از تصاویر در یک مجموعه در نظر گرفته شده است، بنابراین بیایید تصاویر بیشتری اضافه کنیم تا بهتر ببینیم این مؤلفه چگونه کار می کند.

در home.html عنصر <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> ) 15 بار قرار دهید. در مجموع 16 تصویر ایجاد می شود. هنوز نگران تصاویر و عناوین منحصر به فرد نباشید. شما به آنهایی که در MDC-103 هستند خواهید رسید.

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

e2f359c254988d75.png

لیست تصاویر چهار تصویر را در هر ردیف نشان می دهد و اندازه تصاویر به طور خودکار متناسب با فضای صفحه نمایش موجود است.

5. خلاصه کنید

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

مراحل بعدی

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

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

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

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

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

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