Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter در دسترس است. material.io/develop |
در Codelab MDC-101، شما از دو جزء مواد (MDC) برای ایجاد رابط کاربری صفحه ورود استفاده کردید: فیلد متن و دکمه. حالا بیایید با اضافه کردن ناوبری، ساختار و داده این موضوع را گسترش دهیم.
چیزی که خواهی ساخت
در این کد لبه، شما یک صفحه اصلی برای اپلیکیشنی به نام Shrine می سازید، یک اپلیکیشن تجارت الکترونیک که پوشاک و کالاهای خانگی را می فروشد. شامل موارد زیر خواهد بود:
- کشوی ناوبری
- یک لیست تصویری پر از محصولات
اجزای وب MDC در این کد لبه
- کشو
- لیست تصاویر
آنچه شما نیاز دارید
- نسخه اخیر Node.js (که همراه با npm ، یک مدیر بسته جاوا اسکریپت) ارائه می شود.
- نمونه کد (در مرحله بعد دانلود می شود)
- دانش اولیه HTML، CSS و جاوا اسکریپت
سطح تجربه خود را در زمینه توسعه وب چگونه ارزیابی می کنید؟
از 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
پس از ظاهر شدن تعداد زیادی فعالیت، ترمینال شما باید نصب موفقیت آمیز را نشان دهد:
برنامه استارتر را اجرا کنید
در همان دایرکتوری این را اجرا کنید:
npm start
webpack-dev-server شروع خواهد شد. برای مشاهده صفحه، مرورگر خود را به http://localhost:8080/ ببرید.
موفقیت! شما باید صفحه ورود به حرم را از آزمایشگاه کد MDC-101 ببینید.
اکنون که صفحه ورود به سیستم خوب به نظر می رسد، بیایید برنامه را با برخی از محصولات پر کنیم. یک نام کاربری و رمز عبور معتبر وارد کنید، سپس روی دکمه "بعدی" کلیک کنید تا به صفحه اصلی بروید.
هنگامی که کاربر وارد سیستم می شود، صفحه اصلی ظاهر می شود که می گوید: "تو این کار را کردی!" عالیه! اما اکنون کاربر ما به اقداماتی نیاز دارد که باید انجام دهد و درک کند که در برنامه کجاست. برای کمک به آن، اجازه دهید ناوبری را اضافه کنیم.
الگوهای ناوبری 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 بازخوانی کنید. صفحه اصلی شما اکنون باید به شکل زیر باشد:
اکنون صفحه اصلی دارای یک کشوی پیمایش دائمی است که موارد مختلف ناوبری را با اولین مورد فعال نمایش می دهد.
اکنون که برنامه ما ساختاری دارد، بیایید محتوا را با قرار دادن آن در یک لیست تصویری سازماندهی کنیم.
MDC Image List را نصب کنید
برای نصب بسته برای کامپوننت لیست تصویر، اجرا کنید:
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;
}این سبک‌ها به فهرست تصاویر دستور می‌دهند تا تصاویر را در چهار ستون نمایش دهد و اطمینان حاصل شود که فهرست تصاویر مستقل از کشو حرکت می‌کند.
صفحه را رفرش کنید. صفحه اصلی اکنون باید به شکل زیر باشد:
یک لیست تصویر برای نمایش بسیاری از تصاویر در یک مجموعه در نظر گرفته شده است، بنابراین بیایید تصاویر بیشتری اضافه کنیم تا بهتر ببینیم این مؤلفه چگونه کار می کند.
در 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 هستند خواهید رسید.
تازه کردن. اکنون صفحه اصلی باید به شکل زیر باشد:
لیست تصاویر چهار تصویر را در هر ردیف نمایش می دهد و اندازه تصاویر به طور خودکار متناسب با فضای صفحه نمایش موجود است.
سایت شما دارای یک جریان اولیه است که کاربر را از صفحه ورود به صفحه اصلی می برد، جایی که محصولات قابل مشاهده هستند. فقط در چند خط کد، یک کشو و یک لیست تصویر برای ارائه محتوا اضافه کردید. اکنون صفحه اصلی دارای ساختار و محتوای اولیه است.
مراحل بعدی
با فهرست کشو و تصویر، اکنون از دو جزء اصلی Material Design از کتابخانه وب MDC استفاده کرده اید! با مراجعه به کاتالوگ وب MDC می توانید اجزای بیشتری را کاوش کنید.
در حالی که به طور کامل کار می کند، صفحه اصلی هنوز برند یا دیدگاه خاصی را بیان نمی کند. در MDC-103: طرح زمینه طراحی متریال با رنگ، شکل، ارتفاع و نوع ، شما سبک این اجزا را برای بیان یک برند پر جنب و جوش و مدرن سفارشی خواهید کرد.