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

Веб-сайт MDC-101: основы материальных компонентов (MDC) (Интернет)

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

material.io/develop

Что такое Material Design и Material Components для Интернета?

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

Для настольных компьютеров и мобильных устройств Material Components Web (MDC Web) объединяет дизайн и разработку с библиотекой компонентов для обеспечения согласованности приложений и веб-сайтов. Каждый компонент MDC Web находится в собственном модуле Node, поэтому по мере развития системы 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 CLI или используя плагин (например, 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 и логотип 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 Web стилизуются с помощью 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 Text Field, который включает встроенную функцию отображения плавающей метки и активации сенсорного эффекта.

Установить текстовое поле 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 текстовых полей « Имя пользователя» и «Пароль» .
Установите атрибут minlength элемента mdc-text-field__input текстового поля « Пароль » на "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» вместе с компонентом «Пульсация MDC», чтобы создать культовый эффект чернильной ряби в стиле 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, библиотека Material Components для веб-сайтов помогла вам создать красивую страницу входа, которая соответствует принципам Material Design, а также выглядит и ведет себя одинаково на всех устройствах.

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

«Текстовое поле», «Кнопка» и «Рифля» — три основных компонента библиотеки MDC Web, но их гораздо больше! Вы также можете ознакомиться с остальными компонентами MDC Web .

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

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

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

Соглашаться

Нейтральный

Не согласен

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

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

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

Соглашаться

Нейтральный

Не согласен

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

Что такое Material Design и Material Components для Интернета?

Что вы построите

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

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

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

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

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

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

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

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

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

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

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

Добавьте HTML

Добавьте CSS

Добавьте JavaScript

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

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

Добавьте HTML

Добавьте CSS

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

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

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

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

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

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