1. Введение
Компоненты Material (MDC) помогают разработчикам внедрять Material Design. Созданные командой инженеров и UX-дизайнеров Google, MDC включают в себя десятки красивых и функциональных компонентов пользовательского интерфейса и доступны для Android, iOS, веб-приложений и Flutter.material.io/develop |
Компоненты Material для веб-разработки (MDC Web) не зависят от фреймворка и созданы с использованием обычного JavaScript. Это позволяет MDC Web беспрепятственно интегрироваться в ваш процесс разработки. Эти компоненты можно устанавливать по мере необходимости, чтобы вносить улучшения в дизайн вашего существующего приложения с помощью гибких методологий.
Что вы построите
В этом практическом задании вы замените некоторые существующие компоненты в форме компонентами, предоставленными MDC Web:
Компоненты MDC Web в этом практическом занятии.
- Кнопка
- Выбирать
- Текстовое поле
Что вам понадобится
- Последняя версия 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, добавив следующее в элемент <head> :
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Перезагрузите страницу, и вы должны увидеть что-то подобное:
Теперь при нажатии кнопка отображает едва заметный эффект ряби в качестве визуальной обратной связи.
4. Обновите элемент select.
Компонент MDC Select оборачивает стандартный HTML-элемент <select> . Используйте его везде, где обычно используется <select> . Давайте обновим поле "State" .
Установите модуль MDC Node.
Нажмите 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';
Чтобы создать экземпляр элемента select, добавьте следующий код в конец файла app.js :
new MDCSelect(document.querySelector('.mdc-select'));
Перезагрузите страницу, теперь она должна выглядеть так:
Компонент MDC Select отображает пользователю список опций в привычном формате, но с современным оформлением.
5. Обновите текстовые поля.
Текстовые поля в стиле Material Design значительно превосходят по удобству использования обычные элементы <input> . Они разработаны таким образом, чтобы их было легко идентифицировать в сложном контенте, и отображают ненавязчивую визуальную обратную связь при взаимодействии с пользователем.
Установите модуль MDC Node.
Нажмите Ctrl + C , чтобы остановить сервер разработки. Затем выполните:
npm install @material/textfield npm start
Добавьте CSS
Добавьте следующее в файл _theme.scss сразу после оператора select import:
@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>
Наконец, заключите все 3 элемента в следующий код:
<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);
});
Перезагрузите страницу, теперь она должна выглядеть так:
Теперь все текстовые поля обновлены в соответствии с концепцией Material Design.
6. Подведение итогов
Вы заменили некоторые распространенные компоненты (текстовые поля, выпадающие списки и кнопки), не проведя полную переработку дизайна приложения. Отличная работа!
К другим компонентам, которые также могут существенно повлиять на результат, относятся верхняя панель приложений и выдвижная панель навигации.
Следующие шаги
Вы можете ознакомиться с еще большим количеством компонентов MDC Web, посетив каталог MDC Web .
Если вас интересует использование MDC Web с конкретным фреймворком, перейдите к MDC-112: Интеграция MDC с веб-фреймворками .