Эта страница переведена с помощью Cloud Translation API.

Веб-сайт MDC-103: тематика материала с указанием цвета, формы, высоты и типа (Интернет)

1. Введение

Material Components (MDC) помогают разработчикам реализовать Material Design. Созданный командой инженеров и UX-дизайнеров Google, MDC включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, Интернета и Flutter.material.io/develop.

В лабораторных работах MDC-101 и MDC-102 вы использовали Material Components (MDC) для создания основ приложения Shrine — приложения для электронной коммерции, которое продает одежду и товары для дома. Пользовательский процесс этого приложения начинается с экрана входа в систему, который затем переносит пользователя на главный экран, содержащий продукты.

Material Design недавно расширился, чтобы предоставить дизайнерам и разработчикам большую гибкость в представлении бренда своего продукта. В этой лабораторной работе с кодом вы будете использовать MDC для настройки приложения Shrine, чтобы оно отражало уникальный стиль бренда в большем количестве способов, чем когда-либо прежде.

Что ты построишь

В этой кодовой лаборатории вы настроите Shrine так, чтобы он отражал ее бренд, используя:

Цвет
Типография
Высота
Форма
Макет

Веб-компоненты и подсистемы MDC, используемые в этой лаборатории кода.

Тема
Типография
Высота
Список изображений

Что вам понадобится

Последняя версия Node.js (которая поставляется в комплекте с npm , менеджером пакетов JavaScript).
Пример кода (можно загрузить на следующем шаге)
Базовые знания HTML, CSS и JavaScript.

Как бы вы оценили свой уровень опыта веб-разработки?

Новичок

Средний

Опытный

2. Настройте среду разработки

Продолжаем 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 material-components-web-codelabs/mdc-103/starter (это должен быть ваш текущий каталог, если вы выполните описанный выше шаг) запустите:

npm install

Вы увидите много активности, и в конце ваш терминал должен показать успешную установку:

MDC Web использует препроцессор CSS под названием Sass . Если вы используете другой препроцессор CSS (или вообще его не используете), ничего страшного! Вы можете использовать Sass вместе с вашим текущим препроцессором , установив интерфейс командной строки sass или используя плагин (например, sass-loader для Webpack, gulp-sass для Gulp или grunt-sass для Grunt) в вашей цепочке инструментов сборки.

Чтобы наш код работал в старых браузерах, таких как IE 11, мы используем транспилятор Babel для преобразования синтаксиса JavaScript ES2015 MDC Web в синтаксис JavaScript ES5.

Мы будем использовать веб-пакет для объединения наших файлов и локального обслуживания нашего сайта. Конфигурация веб-пакета для этого проекта уже настроена в файле webpack.config.js . Более подробную информацию о том, как оно было настроено, можно найти в руководстве «Приступая к работе» .

Запустите стартовое приложение

В том же каталоге запустите:

npm start

webpack-dev-server запустится. Направьте свой браузер на http://localhost:8080/, чтобы увидеть страницу.

Успех! Вы должны увидеть страницу входа в Shrine в вашем браузере. Заполните поля «Имя пользователя» и «Пароль» и нажмите кнопку «Далее», чтобы перейти на домашнюю страницу. Слева должен отображаться навигационный ящик, рядом с сеткой изображений продуктов.

Хотя панель навигации функциональна, давайте приведем ее в соответствие с брендом Shrine, изменив ее цвет, высоту и типографику.

3. Измените цвет

Эта цветовая тема была создана дизайнером с использованием нестандартных цветов (показано на изображении ниже). Он содержит цвета, выбранные из бренда Shrine и примененные к редактору тем материалов, который расширил их для создания более полной палитры. (Эти цвета не входят в цветовую палитру 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";

В файле 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 . Ваш главный экран теперь должен выглядеть так:

Давайте изменим цвет экрана входа в систему, чтобы он соответствовал нашей цветовой схеме.

В 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/ . Теперь ваш экран входа в систему должен выглядеть так:

4. Измените типографику и стили меток.

Помимо изменения цвета ваш дизайнер также предоставил вам специальную типографику для использования на сайте. Давайте добавим это и в панель навигации.

Чтобы установить пакет для Typography, запустите:

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);
  }
}

Обновите страницу. Ваш главный экран теперь должен выглядеть так:

5. Adjust elevation

Теперь, когда вы оформили страницу с использованием определенных цветов и типографики 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
}

Впечатляющий! Вы добавили тень к левому краю белой поверхности позади элементов списка изображений, так что она кажется парящей немного над навигационной панелью.

6. Измените макет

Далее давайте изменим макет, чтобы изображения отображались с разными соотношениями сторон и размерами, чтобы каждое изображение выглядело уникально на фоне других.

Измените 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/ .

7. Попробуйте другую тему

Цвет — это мощный способ выразить ваш бренд, и небольшое изменение цвета может оказать большое влияние на ваш пользовательский опыт. Чтобы проверить это, давайте посмотрим, как бы выглядел 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 .

8. Подведение итогов

Теперь вы создали приложение, которое соответствует спецификациям вашего дизайнера.

Следующие шаги

Теперь вы использовали следующие компоненты MDC: тему, типографику, высоту и форму. Дополнительные компоненты и подсистемы можно изучить в веб-каталоге MDC .

Мне удалось завершить эту кодовую работу, потратив разумное количество времени и усилий.

Полностью согласен

Соглашаться

Нейтральный

Не согласен

Категорически не согласен

Я хотел бы продолжать использовать Material Components в будущем.