Компоненты Material (MDC) помогают разработчикам реализовывать принципы Material Design. MDC, созданный командой инженеров и UX-дизайнеров Google, включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, веб-приложений и Flutter. material.io/develop |
В практической работе MDC-101 вы использовали два компонента Material (MDC) для создания пользовательского интерфейса страницы входа: текстовое поле и кнопку. Теперь давайте дополним это, добавив навигацию, структуру и данные.
Что вы построите
В этой лабораторной работе вы создадите домашнюю страницу для приложения Shrine — приложения электронной коммерции, продающего одежду и товары для дома. Она будет содержать:
- Навигационный ящик
- Список изображений, полный продуктов
Веб-компоненты MDC в этой лабораторной работе
- Ящик
- Список изображений
Что вам понадобится
- Последняя версия Node.js (которая поставляется в комплекте с npm , менеджером пакетов JavaScript).
- Пример кода (будет загружен на следующем этапе)
- Базовые знания HTML, CSS и JavaScript
Как бы вы оценили свой уровень опыта в веб-разработке?
Продолжение MDC-101?
Если вы прошли курс MDC-101, ваш код должен быть готов к этой лабораторной работе. Перейдите к шагу 3: добавьте панель навигации.
Загрузите стартовое приложение Codelab
Стартовое приложение находится в каталоге 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/ .
Готово! Вы должны увидеть страницу входа в Shrine из лабораторной работы MDC-101.
Теперь, когда страница входа выглядит хорошо, давайте добавим в приложение несколько товаров. Введите корректное имя пользователя и пароль, затем нажмите кнопку «Далее», чтобы перейти на главную страницу.
Когда пользователь входит в систему, открывается главная страница с надписью: «Вы сделали это!». Это здорово! Но теперь пользователю нужны действия, которые он может выполнить, и понимание того, где он находится в приложении. Чтобы это исправить, давайте добавим навигацию.
Шаблоны навигации Material Design обеспечивают высокий уровень удобства использования. Панель навигации Material обеспечивает навигацию и быстрый доступ к другим действиям. Давайте добавим ещё одно.
Установить ящик и список 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 "@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;
}Добавьте JavaScript
Для корректной навигации с помощью клавиатуры нам необходимо создать экземпляр списка MDC внутри навигационной панели. Откройте home.js , который сейчас пуст, и добавьте следующий код:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));Обновите страницу по адресу http://localhost:8080/home.html . Ваша домашняя страница теперь должна выглядеть так:
Теперь на домашней странице имеется постоянная панель навигации, отображающая различные элементы навигации, при этом первый элемент является активным.
Теперь, когда наше приложение имеет определенную структуру, давайте организуем контент, поместив его в список изображений.
Установить список образов 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;
}Эти стили предписывают отображать изображения в четырех столбцах, гарантируя, что список изображений прокручивается независимо от панели.
Обновите страницу. Теперь главная страница должна выглядеть так:
Список изображений предназначен для отображения большого количества изображений в коллекции, поэтому давайте добавим больше изображений, чтобы лучше увидеть, как работает компонент.
В 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: Material Design: темы, цвета, формы, фасады и шрифты вы настроите стиль этих компонентов, чтобы отразить яркий, современный бренд.