Компоненты Material (MDC) помогают разработчикам реализовывать принципы Material Design. MDC, созданный командой инженеров и UX-дизайнеров Google, включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, веб-приложений и Flutter. material.io/develop |
В практических занятиях MDC-101 и MDC-102 вы использовали Material Components (MDC) для создания базовой версии приложения Shrine — приложения электронной коммерции, продающего одежду и товары для дома. Пользовательский интерфейс этого приложения начинается с экрана входа, который затем перенаправляет пользователя на главный экран с товарами.
Недавно Material Design был расширен, предоставляя дизайнерам и разработчикам больше гибкости для выражения бренда своего продукта. В этой лабораторной работе вы будете использовать MDC для настройки приложения Shrine, чтобы оно отражало уникальный стиль бренда в ещё большей степени, чем когда-либо прежде.
Что вы построите
В этой лабораторной работе вы настроите Shrine так, чтобы он отражал ее бренд, используя:
- Цвет
- Типографика
- Высота
- Форма
- Макет
Компоненты и подсистемы MDC Web, используемые в этой лабораторной работе
- Тема
- Типографика
- Высота
- Список изображений
Что вам понадобится
- Последняя версия Node.js (которая поставляется в комплекте с npm , менеджером пакетов JavaScript).
- Пример кода (будет загружен на следующем этапе)
- Базовые знания HTML, CSS и JavaScript
Как бы вы оценили свой уровень опыта в веб-разработке?
Продолжаете MDC-102?
Если вы прошли курс MDC-102, ваш код должен быть готов к использованию в этой практической работе. Перейдите к шагу 3: Измените цвет .
Загрузите стартовое приложение Codelab
Стартовое приложение находится в каталоге material-components-web-codelabs-master/mdc-103/starter . Перед началом работы обязательно cd в этот каталог.
...или клонируйте его с GitHub
Чтобы клонировать эту кодовую лабу из GitHub, выполните следующие команды:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
Установка зависимостей проекта
Из стартового каталога material-components-web-codelabs/mdc-103/starter (это должен быть ваш текущий каталог, если вы выполните указанные выше действия) выполните:
npm install
Вы увидите много активности, и в конце ваш терминал должен показать успешную установку:
Запустите стартовое приложение
В том же каталоге выполните:
npm start
Будет запущен webpack-dev-server . Чтобы открыть страницу, перейдите в браузере по адресу http://localhost:8080/ .
Готово! В вашем браузере должна открыться страница входа Shrine. Заполните поля «Имя пользователя» и «Пароль» и нажмите кнопку «Далее», чтобы перейти на главную страницу. Слева должна отображаться панель навигации рядом с сеткой изображений товаров.
Хотя панель навигации функциональна, давайте приведем ее в соответствие с брендом Shrine, изменив ее цвет, высоту и шрифт.
Эта цветовая тема создана дизайнером с использованием собственных цветов (показано на изображении ниже). Она содержит цвета, выбранные из фирменного стиля Shrine и примененные в редакторе тем Material, который расширил их, создав более полную палитру. (Эти цвета не входят в палитры Material 2014 года.)
Давайте изменим цвет панели навигации приложения Shrine, чтобы он отражал эту цветовую схему.
Переопределить цвета темы
Создайте новый файл с именем _variables.scss , содержащий следующее:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E; Затем импортируйте его в самый верх _common.scss :
@import "./variables";Добавьте стили CSS в панель навигации
В home.scss добавьте следующий оператор импорта после существующих импортов:
@import "@material/ripple/mixins"; Затем добавьте следующие стили, создав класс .shrine-drawer :
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}Обновите страницу по адресу http://localhost:8080/home.html . Ваш домашний экран теперь должен выглядеть так:
Давайте изменим цвет экрана входа в систему в соответствии с нашей цветовой схемой.
Добавить стили CSS на страницу входа
В login.scss добавьте следующие строки:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
} Также добавьте следующие вызовы миксина внутри селектора CSS .username, .password :
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}Обновите страницу по адресу http://localhost:8080/ . Теперь ваш экран входа должен выглядеть так:
Помимо изменения цветов, ваш дизайнер также предоставил вам определённую типографику для использования на сайте. Давайте добавим её и в панель навигации.
Чтобы установить пакет для типографики, выполните:
npm install @material/typography
Добавьте CSS для типографики
В home.scss добавьте следующий оператор импорта после существующих импортов:
@import "@material/typography/mdc-typography";Затем добавьте следующий вызов миксина к классу shrine-title :
.shrine-title {
@include mdc-typography(headline6);
...
}Далее займемся оформлением предметов в ящике.
Добавить разделитель строк
В home.html добавьте следующее сразу после элемента <a ...>Featured</a> :
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>Добавьте следующие стили в home.scss :
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}Настройте элементы изображения и метки
Чтобы настроить элементы и метки, добавьте следующие стили в home.scss в селекторе .product-list :
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}Обновите страницу. Ваш главный экран теперь должен выглядеть так:
Теперь, когда вы оформили страницу в фирменных цветах и шрифтах Shrine, давайте посмотрим на список изображений с продукцией Shrine. Давайте привлечём внимание к товарам, сделав на них более выразительные акценты.
Чтобы установить пакет для Elevation, выполните:
npm install @material/elevation
Добавьте оператор импорта
В home.scss добавьте следующую строку после последнего оператора импорта:
@import "@material/elevation/mdc-elevation";Оберните список изображений в новый div
В home.html добавьте следующую разметку вокруг элемента <ul> :
<div class="shrine-body">
<ul...>
</div>Изменение высоты с помощью миксинов Sass
В home.scss добавьте следующее:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}Впечатляет! Вы добавили тень к левому краю белой поверхности за элементами списка изображений, так что она как будто парит над панелью навигации.
Далее изменим макет, чтобы отображать изображения с разными соотношениями сторон и размерами, чтобы каждое изображение выглядело уникально по сравнению с другими.
Изменить HTML
В home.html обновите элемент mdc-image-list , чтобы он содержал класс mdc-image-list--masonry :
<ul class="mdc-image-list mdc-image-list--masonry product-list">Добавить изображения
В home.html измените атрибут src каждого элемента img в соответствии с изображениями в папке assets . Затем обновите текст метки для каждого изображения. Результат должен выглядеть следующим образом:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</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>Обновить CSS
В home.scss удалите миксин mdc-image-list-standard-columns(4) и замените его следующим миксином:
@include mdc-image-list-masonry-columns(4);Затем добавьте следующие значения padding в класс product-list в home.scss :
.product-list {
...
padding: 80px 100px 0;
}
Теперь ваш код должен соответствовать коду, включенному в папку complete/ .
Цвет — мощный инструмент для выражения вашего бренда, и даже небольшое изменение цвета может существенно повлиять на пользовательский опыт. Чтобы проверить это, давайте посмотрим, как выглядел бы Shrine, если бы цветовая схема бренда была совершенно другой.
Изменить CSS
В _variables.scss замените переменные, объявленные вами для основной темы, следующими:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;В login.scss удалите миксины в селекторе .username, .password . Должно получиться примерно так:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Кроме того, удалите переопределение миксина mdc-button-ink-color в классе .cancel :
В home.scss добавьте следующее правило к классу .home :
background-color: $mdc-theme-background;В селекторе .shrine-logo-drawer замените свойство fill на основной цвет:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}Аналогично, в селекторе .shrine-title задайте свойству color основной цвет:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Наконец, удалите миксин mdc-elevation использованный ранее под селектором .shrine-body .
Выполните сборку и запустите. Новая тема должна появиться в вашем браузере.
Теперь перейдите по адресу http://localhost:8080/home.html, чтобы увидеть изменения на странице home.html .
Теперь вы создали приложение, которое соответствует спецификациям вашего дизайнера.
Следующие шаги
Вы уже использовали следующие компоненты MDC: тему, типографику, фасад и форму. Подробнее о компонентах и подсистемах можно узнать в веб-каталоге MDC .