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

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

1. Введение

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

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

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.

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

Новичок

Средний

Опытный

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 вместе с вашим текущим препроцессором , установив интерфейс командной строки 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» и логотип 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 , созданного веб-пакетом, а тег <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;
}

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

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

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

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

Веб-компоненты MDC публикуются через пакеты 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/ . Теперь вы должны увидеть страницу с двумя текстовыми полями для имени пользователя и пароля!

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

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

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

Установить кнопку 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;
}

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

Когда пользователь касается или нажимает кнопку, он должен отображать обратную связь в виде ряби чернил. Компоненту Ink Ripple требуется 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 Design и одинаково выглядит и ведет себя на всех устройствах.

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

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

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

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

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

Соглашаться

Нейтральный

Не согласен

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

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

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

Соглашаться

Нейтральный

Не согласен

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

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

1. Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавьте HTML

Добавьте CSS

Добавьте JavaScript

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

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

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

Добавьте HTML

Добавьте CSS

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

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

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

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

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

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

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