Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

MDC-101 Web: Основы компонентов материалов (MDC) (Web)

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

material.io/разработка

Что такое материальный дизайн и материальные компоненты для Интернета?

Material Design — это система для создания смелых и красивых цифровых продуктов. Объединяя стиль, брендинг, взаимодействие и движение в соответствии с последовательным набором принципов и компонентов, команды разработчиков могут реализовать свой наибольший дизайнерский потенциал.

Для настольных и мобильных веб-сайтов Material Components Web (MDC Web) объединяет дизайн и разработку с библиотекой компонентов для обеспечения согласованности между приложениями и веб-сайтами. Каждый веб-компонент MDC находится в своем собственном узловом модуле, поэтому по мере развития системы Material Design эти компоненты можно легко обновлять, чтобы обеспечить согласованную реализацию с точностью до пикселя и соответствие стандартам разработки интерфейса Google. MDC также доступен для Android , iOS и Flutter .

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

Что вы будете строить

Эта лаборатория кода является первой из трех лабораторий кода, которые помогут вам создать приложение под названием Shrine , веб-сайт электронной коммерции, который продает одежду и товары для дома. Он продемонстрирует, как вы можете настраивать компоненты, чтобы они отражали любой бренд или стиль с помощью MDC Web.

В этой лаборатории кода вы создадите страницу входа в Shrine, содержащую:

Два текстовых поля, одно для ввода имени пользователя, другое для пароля
Две кнопки, одна для «Отмена» и одна для «Далее».
Название сайта (Храм)
Изображение логотипа Shrine

Веб-компоненты MDC в этой лаборатории кода

Текстовое поле
Кнопка
пульсация

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

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

Мы всегда стараемся улучшить наши уроки. Как бы вы оценили свой уровень опыта в веб-разработке?

Новичок

Средний

Опытный

Загрузите начальное приложение Codelab

Скачать стартовое приложение

Стартовое приложение находится в material-components-web-codelabs-master/mdc-101/starter . Обязательно cd в этот каталог перед началом.

...или клонируйте его с GitHub

Чтобы клонировать эту лабораторию кода из GitHub, выполните следующие команды:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

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

Из начального каталога запустите:

npm install

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

Если это не так, запустите npm audit fix .

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 для объединения наших файлов и локального обслуживания нашего сайта. Конфигурация веб-пакета для этого проекта уже настроена для вас в файле webpack.config.js . Подробнее о том, как он был настроен, см. в руководстве по началу работы .

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

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

npm start

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

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

Взгляните на код

Метаданные в `index.html`

В стартовом каталоге откройте index.html в своем любимом редакторе кода. Он должен содержать это:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

Здесь <link> используется для загрузки файла bundle-login.css , сгенерированного webpack, а <script> включает файл bundle-login.js . Кроме того, мы включаем normalize.css для согласованного кросс-браузерного рендеринга, а также шрифт Roboto из Google Fonts.

Пользовательские стили в `login.scss`

Веб-компоненты MDC стилизованы с использованием классов CSS mdc-* , таких как класс mdc-text-field . (MDC Web рассматривает свою структуру DOM как часть общедоступного API.)

Как правило, рекомендуется изменять пользовательские стили компонентов с помощью собственных классов. Вы могли заметить некоторые пользовательские классы CSS в приведенном выше HTML-коде, такие как shrine-logo . Эти стили определены в login.scss для добавления основных стилей на страницу.

Откройте login.scss , и вы увидите следующие стили для страницы входа:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

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

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

Установите текстовое поле MDC

Веб-компоненты MDC публикуются через пакеты NPM . Чтобы установить пакет для компонента текстового поля, запустите:

npm install @material/textfield

Добавьте HTML

В index.html добавьте следующее внутри элемента <form> в теле:

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username">
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

Структура DOM текстового поля MDC состоит из нескольких частей:

Основной элемент, mdc-text-field
Подэлементы mdc-text-field__input , mdc-floating-label и mdc-line-ripple

Добавьте CSS

В login.scss добавьте следующий оператор импорта после существующего импорта:

@import "@material/textfield/mdc-text-field";

В том же файле добавьте следующие стили для выравнивания и центрирования текстовых полей:

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

Добавьте JavaScript

Откройте login.js , который в данный момент пуст. Добавьте следующий код для импорта и создания текстовых полей:

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

Добавить проверку HTML5

Текстовые поля сообщают, является ли ввод данных допустимым или содержит ошибку, с помощью атрибутов, предоставляемых API проверки формы HTML5.

Вам следует:

Добавьте required атрибут в mdc-text-field__input текстовых полей Username и Password .
Установите для атрибута minlength элемента mdc-text-field__input текстового поля Password значение "8" .

Настройте два элемента <div class="mdc-text-field"> , чтобы они выглядели следующим образом:

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

Обновите страницу по адресу http://localhost:8080/ . Теперь вы должны увидеть страницу с двумя текстовыми полями для имени пользователя и пароля!

Нажмите на текстовые поля, чтобы проверить анимацию плавающей метки и анимацию волнистости линии (нижняя граница, которая волнообразно выходит наружу):

Далее мы добавим на нашу страницу входа две кнопки: «Отмена» и «Далее». Мы будем использовать компонент MDC Button вместе с компонентом MDC Ripple, чтобы завершить культовый эффект пульсации чернил в стиле Material Design.

Установить кнопку MDC

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

npm install @material/button

Добавьте HTML

В index.html добавьте следующее ниже закрывающего тега элемента <div class="mdc-text-field password"> :

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

Для кнопки «Отмена» мы используем стиль кнопки по умолчанию. Однако кнопка «Далее» использует вариант с повышенным стилем, на который указывает mdc-button--raised .

Чтобы позже их было легко выровнять, мы заключаем два mdc-button в элемент <div> .

Добавьте CSS

В login.scss добавьте следующий оператор импорта после существующего импорта:

@import "@material/button/mdc-button";

Чтобы выровнять кнопки и добавить поля вокруг них, добавьте в login.scss следующие стили:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

Добавьте чернильную рябь на кнопки

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

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

npm install @material/ripple

В верхней части login.js добавьте следующий оператор импорта:

import {MDCRipple} from '@material/ripple';

Чтобы создать рябь, добавьте в login.js следующее:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Поскольку нам не нужно сохранять ссылку на экземпляр ripple, нет необходимости назначать его переменной.

Вот и все! Обновите страницу. При нажатии каждой кнопки будет отображаться чернильная рябь.

Заполните текстовые поля допустимыми значениями и нажмите кнопку «ДАЛЕЕ». Ты сделал это! Вы продолжите работу над этой страницей в MDC-102.

Используя базовую HTML-разметку и всего несколько строк CSS и JavaScript, компоненты материалов для веб-библиотеки помогли вам создать красивую страницу входа в систему, которая соответствует рекомендациям по дизайну материалов, а также выглядит и ведет себя одинаково на всех устройствах.

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

Текстовое поле, кнопка и пульсация — это три основных компонента веб-библиотеки MDC, но их гораздо больше! Вы также можете изучить остальные компоненты в MDC Web .

Вы можете перейти к MDC-102: Material Design Structure and Layout , чтобы узнать о навигационном ящике и списке изображений . Спасибо, что попробовали Material Components. Надеемся, вам понравилась эта лаборатория кода!

Я смог завершить эту лабораторную работу с разумным количеством времени и усилий.

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

Соглашаться

Нейтральный

Не согласен

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

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

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

Соглашаться

Нейтральный

Не согласен

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

MDC-101 Web: Основы компонентов материалов (MDC) (Web)

Что такое материальный дизайн и материальные компоненты для Интернета?

Что вы будете строить

Веб-компоненты MDC в этой лаборатории кода

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

Мы всегда стараемся улучшить наши уроки. Как бы вы оценили свой уровень опыта в веб-разработке?

Загрузите начальное приложение Codelab

...или клонируйте его с GitHub

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

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

Взгляните на код

Метаданные в index.html

Пользовательские стили в login.scss

Установите текстовое поле MDC

Добавьте HTML

Добавьте CSS

Добавьте JavaScript

Добавить проверку HTML5

Установить кнопку MDC

Добавьте HTML

Добавьте CSS

Добавьте чернильную рябь на кнопки

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

Я смог завершить эту лабораторную работу с разумным количеством времени и усилий.

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

Метаданные в `index.html`

Пользовательские стили в `login.scss`