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

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

1. Введение

Компоненты Material (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 Web, используемые в этом практическом занятии.

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

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

Последняя версия 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

Установите зависимости проекта.

Из директории `starter` material-components-web-codelabs/mdc-103/starter (если вы выполнили описанный выше шаг, это должна быть ваша текущая директория), выполните следующую команду:

npm install

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

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

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

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

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

В той же директории выполните:

npm start

Запустится webpack-dev-server . Откройте в браузере страницу по адресу http://localhost:8080/ .

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

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

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

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

В файле 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. Отрегулируйте высоту.

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