1. Введение
Material Components (MDC) помогают разработчикам реализовать Material Design. Созданный командой инженеров и UX-дизайнеров Google, MDC включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, Интернета и Flutter.material.io/develop. |
В кодовой лаборатории MDC-101 вы использовали два компонента материала (MDC) для создания пользовательского интерфейса страницы входа: текстовое поле и кнопку. Теперь давайте расширим это, добавив навигацию, структуру и данные.
Что ты построишь
В этой лаборатории кода вы создадите домашнюю страницу для приложения Shrine — приложения для электронной коммерции, которое продает одежду и товары для дома. Он будет содержать:
- Навигационный ящик
- Список изображений, полный продуктов
Веб-компоненты MDC в этой лаборатории кода
- Ящик
- Список изображений
Что вам понадобится
- Последняя версия 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 обеспечивают высокую степень удобства использования. Панель навигации по материалам обеспечивает навигацию и быстрый доступ к другим действиям. Давайте добавим один.
Установите ящик и список MDC
Чтобы установить пакеты для компонента ящика, запустите:
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 "@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: Тематическое оформление дизайна материалов с использованием цвета, формы, высоты и типа вы сможете настроить стиль этих компонентов, чтобы выразить яркий, современный бренд.