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