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

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

1. Введение

Компоненты Material (MDC) помогают разработчикам внедрять Material Design. Созданные командой инженеров и UX-дизайнеров Google, MDC включают в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступны для 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, которая будет содержать:

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

Компоненты MDC Web в этом практическом занятии.

Текстовое поле
Кнопка
Рябь

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

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

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

Новичок

Средний

Профессионал

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

Скачайте стартовое приложение 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 вместе с вашим текущим препроцессором, установив 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" и логотип Shrine чуть ниже него.

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

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

В директории starter откройте 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.)

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

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

@import "./common";

.header {
  text-align: center;
}

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

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

3. Добавьте текстовые поля.

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

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

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

npm install @material/textfield@^6.0.0

Добавьте HTML

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

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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

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

Добавьте CSS

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

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

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

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

Добавьте 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"

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

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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

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

О текстовых полях:

Поле ввода текста MDC использует стандартный HTML-элемент <input> , поэтому его можно использовать со стандартными HTML-элементами <form> .

Текстовое поле MDC автоматически отображает состояния наведения курсора и фокусировки.
Поле ввода текста MDC включает в себя множество функций и вариантов оформления, таких как вспомогательный текст, сочетание значков, вариант оформления с контуром и текстовое поле. Ознакомьтесь с ними здесь !

4. Добавьте кнопки

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

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

Для установки пакета для компонента кнопки выполните следующую команду:

npm install @material/button@^6.0.0

Добавьте HTML

В index.html добавьте следующий код после закрывающего тега элемента <label class="mdc-text-field mdc-text-field--filled 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@^6.0.0

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

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

Чтобы запустить эффект пульсации, добавьте следующий код в login.js :

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

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

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

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

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

Используя базовую HTML-разметку и всего несколько строк CSS и JavaScript, библиотека Material Components for the web помогла вам создать красивую страницу входа в систему, соответствующую рекомендациям Material Design и демонстрирующую единообразный внешний вид и поведение на всех устройствах.

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

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

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

Мне удалось выполнить это практическое задание за разумное время и с разумными затратами усилий.

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

Соглашаться

Нейтральный

Не согласен

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

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

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

Соглашаться

Нейтральный

Не согласен

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

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

1. Введение

Что такое Material Design и Material Components для веб-разработки?

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

Компоненты MDC Web в этом практическом занятии.

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

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

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

Скачайте стартовое приложение Codelab.

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

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

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

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

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

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

3. Добавьте текстовые поля.

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

Добавьте HTML

Добавьте CSS

Добавьте JavaScript

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

4. Добавьте кнопки

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

Добавьте HTML

Добавьте CSS

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

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

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

Мне удалось выполнить это практическое задание за разумное время и с разумными затратами усилий.

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

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

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