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

۱. مقدمه

logo_components_color_2x_web_96dp.png

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

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

آنچه خواهید ساخت

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

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

e2f359c254988d75.png

اجزای وب MDC در این آزمایشگاه کد

  • کشو
  • فهرست تصاویر

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

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

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

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

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

ادامه از MDC-101؟

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

اپلیکیشن استارتر codelab را دانلود کنید

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

... یا آن را از گیت‌هاب کلون کنید

برای کپی کردن این codelab از گیت‌هاب، دستورات زیر را اجرا کنید:

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

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

6c206785707bee2e.png

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

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

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

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

کشو و فهرست MDC را نصب کنید

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

npm install @material/drawer @material/list

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

در home.html ، عبارت «You did it!» را با نشانه‌گذاری زیر برای کشو و اقلام داخل آن جایگزین کنید:

<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

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

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

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

نصب لیست تصاویر 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 "@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> ) پیست کنید. این کار در مجموع ۱۶ تصویر ایجاد می‌کند. فعلاً نگران تصاویر و عناوین منحصر به فرد نباشید؛ در MDC-103 به آنها خواهید رسید.

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

e2f359c254988d75.png

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

۵. خلاصه

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

مراحل بعدی

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

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

من توانستم این آزمایشگاه کد را با مقدار قابل توجهی از زمان و تلاش تکمیل کنم.

کاملاً موافقم موافق خنثی مخالف کاملاً مخالفم

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

کاملاً موافقم موافق خنثی مخالف کاملاً مخالفم