1. Введение
Material Components (MDC) помогают разработчикам реализовать Material Design. Созданный командой инженеров и UX-дизайнеров Google, MDC включает в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступен для Android, iOS, Интернета и Flutter.material.io/develop. |
Материальные компоненты для Интернета (MDC Web) не зависят от платформы и создаются с использованием обычного JavaScript. Это помогает обеспечить бесперебойную работу MDC Web с вашим процессом разработки. Эти компоненты можно установить по мере необходимости, чтобы улучшить гибкий дизайн существующего приложения.
Что ты построишь
В этой кодовой лаборатории вы замените некоторые существующие компоненты в форме на те, которые предоставлены MDC Web:
Веб-компоненты MDC в этой лаборатории кода
- Кнопка
- Выбирать
- Текстовое поле
Что вам понадобится
- Последняя версия Node.js (которая поставляется в комплекте с npm , менеджером пакетов JavaScript).
- Пример кода (можно загрузить на следующем шаге)
- Базовые знания HTML, CSS и JavaScript.
Как бы вы оценили свой уровень опыта веб-разработки?
2. Настройте среду разработки
Загрузите начальное приложение Codelab.
Стартовое приложение находится в каталоге material-components-web-codelabs-master/mdc-111/starter . Прежде чем начать, обязательно cd в этот каталог.
...или клонируйте его с GitHub
Чтобы клонировать эту кодовую лабораторию из GitHub, выполните следующие команды:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
Установить зависимости проекта
Из стартового каталога ( material-components-web-codelabs/mdc-111/starter ) запустите:
npm install
Вы увидите много активности, и в конце ваш терминал должен показать успешную установку:
Запустите стартовое приложение
В стартовом каталоге запустите:
npm start
webpack-dev-server запустится. Направьте свой браузер на http://localhost:8080/, чтобы увидеть страницу.
Успех! Вы должны увидеть форму адреса доставки приложения:
3. Обновите кнопку
Установить кнопку MDC
Нажмите Ctrl + C , чтобы завершить работу сервера разработки. Затем установите пакет NPM MDC Button и перезапустите сервер:
npm install @material/button npm start
Импортируйте CSS
В верхней части _theme.scss удалите блок .crane-button { ... } и добавьте вместо него следующее:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Обновите разметку
В index.html удалите класс crane-button из элемента <button> , добавьте классы mdc-button и mdc-button--raised и вложите метку в элемент <span> с помощью класса mdc-button__label :
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Добавьте пульсацию
Кнопки MDC можно использовать без JavaScript. Однако добавление интерактивной пульсации к кнопке создает более богатый пользовательский опыт.
Нажмите Ctrl + C , чтобы завершить работу сервера разработки. Затем запустите:
npm install @material/ripple npm start
Добавьте следующий оператор импорта в начало app.js :
import {MDCRipple} from '@material/ripple';
Чтобы создать пульсацию на кнопке, добавьте следующее в конец app.js :
new MDCRipple(document.querySelector('.mdc-button'));
Импортировать шрифт Roboto
По умолчанию Material Design использует Roboto для шрифтов компонентов.
В index.html импортируйте шрифт Roboto Web, добавив в элемент <head> следующее:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Перезагрузите страницу, и вы должны увидеть что-то вроде этого:
Кнопка теперь отображает легкий эффект пульсации в виде визуальной обратной связи при нажатии.
4. Обновите элемент выбора
Компонент MDC Select оборачивает собственный HTML-элемент <select> . Используйте его там, где вы обычно используете <select> . Давайте обновим поле «Состояние» .
Установите модуль узла MDC.
Нажмите Ctrl + C , чтобы завершить работу сервера разработки. Затем запустите:
npm install @material/select npm start
Импортируйте CSS
Добавьте следующее в _theme.scss сразу после импорта кнопки:
@import "@material/select/mdc-select";
Обновить разметку
Найдите элемент <select> в index.html . Замените класс crane-input на mdc-select__native-control :
<select class="mdc-select__native-control" id="crane-state-input" required>
Прямо над тегом <select> добавьте следующую разметку для стрелки раскрывающегося списка компонента MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Чуть ниже закрывающего тега </select> замените класс crane-label на mdc-floating-label :
<label class="mdc-floating-label" for="crane-state-input">
Затем добавьте следующую разметку сразу после метки:
<div class="mdc-line-ripple"></div>
Наконец, добавьте следующие теги вокруг элемента <select> (но внутри элемента crane-field ):
<div class="mdc-select">
...
</div>
Итоговая разметка должна выглядеть так:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Импортируйте JS
Добавьте следующий оператор импорта в начало app.js :
import {MDCSelect} from '@material/select';
Чтобы создать экземпляр выбора, добавьте следующее в конец app.js :
new MDCSelect(document.querySelector('.mdc-select'));
Перезагрузите страницу, которая теперь должна выглядеть так:
Компонент MDC Select представляет пользователю список опций в привычном формате, но в современном стиле.
5. Обновите текстовые поля.
Текстовые поля Material Design имеют значительные преимущества в использовании по сравнению с простыми элементами <input> . Они разработаны таким образом, чтобы их можно было легко идентифицировать в сложном контенте, и они отображали тонкую визуальную обратную связь при взаимодействии пользователя с ними.
Установите модуль узла MDC.
Нажмите Ctrl + C , чтобы завершить работу сервера разработки. Затем запустите:
npm install @material/textfield npm start
Добавьте CSS
Добавьте следующее в _theme.scss сразу после импорта выбора:
@import "@material/textfield/mdc-text-field";
Обновите разметку
В index.html найдите элемент <input> для поля «Имя» . Замените класс crane-input на mdc-text-field__input :
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Затем замените класс crane-label на mdc-floating-label :
<label class="mdc-floating-label" for="crane-name-input">
Затем добавьте следующую разметку сразу после метки:
<div class="mdc-line-ripple"></div>
Наконец, оберните все три элемента следующим образом:
<div class="mdc-text-field">
...
</div>
Итоговая разметка должна выглядеть так:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Повторите ту же процедуру для всех остальных элементов <input> на странице.
Разметка полей « Адрес» , « Город» и « Почтовый индекс» должна выглядеть следующим образом:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Теперь вы можете удалить стили .crane-label и .crane-input из _theme.scss , которые больше не используются.
Импортируйте JS
Добавьте следующий оператор импорта в начало app.js :
import {MDCTextField} from '@material/textfield';
Чтобы создать экземпляры текстовых полей, добавьте следующее в конец app.js :
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Перезагрузите страницу, которая теперь должна выглядеть так:
Все текстовые поля теперь обновлены для использования тем оформления материалов.
6. Подведение итогов
Вы заменили некоторые общие компоненты (текстовые поля, кнопку выбора и кнопку), не внося полную редизайн своего приложения. Отличная работа!
Другие компоненты, которые также могут иметь большое значение, включают верхнюю панель приложения и панель навигации.
Следующие шаги
Вы можете изучить еще больше компонентов MDC Web, посетив веб-каталог MDC .
Если вы заинтересованы в использовании MDC Web с определенной платформой, перейдите к MDC-112: Интеграция MDC с веб-платформами .