1. Введение
Компоненты Material (MDC) помогают разработчикам внедрять Material Design. Созданные командой инженеров и UX-дизайнеров Google, MDC включают в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступны для Android, iOS, веб-приложений и Flutter.material.io/develop |
В практическом задании MDC-101 вы использовали два компонента Material Components (MDC) для создания пользовательского интерфейса страницы входа: текстовое поле и кнопку. Теперь давайте расширим это, добавив навигацию, структуру и данные.
Что вы построите
В этом практическом задании вы создадите главную страницу для приложения Shrine , приложения для электронной коммерции, которое продает одежду и товары для дома. Она будет содержать:
- Навигационная панель
- Список изображений, содержащий множество товаров.
Компоненты MDC Web в этом практическом занятии.
- Ящик
- Список изображений
Что вам понадобится
- Последняя версия Node.js (которая поставляется в комплекте с npm , менеджером пакетов JavaScript).
- Пример кода (будет загружен на следующем шаге)
- Базовые знания HTML, CSS и JavaScript.
Как бы вы оценили свой уровень опыта в веб-разработке?
2. Настройте среду разработки.
Продолжение темы 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.
Теперь, когда страница входа выглядит хорошо, давайте добавим в приложение несколько товаров. Введите действительное имя пользователя и пароль, затем нажмите кнопку «Далее», чтобы перейти на главную страницу.
3. Добавьте выдвижную панель навигации.
Когда пользователь входит в систему, на главной странице появляется надпись: «Вы это сделали!». Это здорово! Но теперь пользователю нужно выполнить какие-то действия и понять, где он находится в приложении. Чтобы помочь в этом, добавим навигацию.
Навигационные шаблоны Material Design обеспечивают высокую степень удобства использования. Выдвижная панель навигации Material Design обеспечивает навигацию и быстрый доступ к другим действиям. Давайте добавим одну.
Установите MDC Drawer и List.
Для установки пакетов для компонента выдвижной панели выполните следующую команду:
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 . Ваша домашняя страница теперь должна выглядеть так:
Теперь на главной странице отображается постоянно присутствующая выдвижная панель навигации с различными элементами, при этом первый элемент является активным.
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 "@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.
Обновите страницу. Теперь главная страница должна выглядеть так:
В списке изображений отображается по четыре изображения в каждой строке, и размер изображений автоматически подстраивается под доступное пространство экрана.
5. Подведение итогов
На вашем сайте используется базовая структура, которая ведет пользователя со страницы входа на главную страницу, где можно просмотреть товары. Всего несколькими строками кода вы добавили выдвижную панель и список изображений для отображения контента. Теперь главная страница имеет базовую структуру и контент.
Следующие шаги
Теперь, когда вы добавили выдвижную панель и список изображений, вы использовали еще два основных компонента Material Design из веб-библиотеки MDC! Вы можете ознакомиться с другими компонентами, посетив веб-каталог MDC .
Хотя главная страница полностью функциональна, она пока не выражает какой-либо конкретный бренд или точку зрения. В курсе MDC-103: «Темпирование в стиле Material Design с использованием цвета, формы, рельефа и шрифта » вы сможете настроить стиль этих компонентов, чтобы выразить яркий, современный бренд.