Примечание:

Этот проект больше не поддерживается активно. Хотя автоматические обновления могут продолжаться, команда не будет приоритизировать новые функции или исправления ошибок, и эти обновления будут отключены в будущем.

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

Компоненты Material для веба

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

Material Web стремится безупречно интегрироваться в более широкий спектр контекстов использования, от простых статических сайтов до сложных, JavaScript-зависимых приложений и гибридных клиентских/серверных систем рендеринга. Коротко говоря, независимо от того, инвестируете ли вы в другой фреймворк или нет, должно быть легко интегрировать Компоненты Material в ваш сайт в легковесном, идиоматическом стиле.Компоненты Material для веба являются преемником Material Design Lite. В дополнение к реализации руководств Material Design, они предоставляют более гибкую настройку тем, не только в терминах цвета, но также шрифтов, формы, состояний и более. Они также специально архитекторы для адаптации к различным основным веб-фреймворкам.

ВАЖНО: Компоненты Material Web тенденция к выпуску разрывающих изменения ежемесячно, но они следуют semver, поэтому вы можете контролировать, когда вы будете их интегрировать. Мы обычно следуем расписанию выпуска в twor недели, которое включает один основной выпуск в месяц с разрывающими изменениями, и промежуточные выпуски патчей с исправлениями ошибок.

Важные ссылки

• Руководство по началу работы
• Демо (внешний сайт)
• Material на других фреймворках
• Примеры использования Material Web
• Участие в проекте
• Руководства Material Design (внешний сайт)
• Поддерживаемые браузеры
• Все компоненты
• История изменений

Быстрый старт

Использование через CDN

<!-- Необходимые стили для Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
```<!-- Отображение компонента textfield -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Метка</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Необходимая библиотека JavaScript Material Web -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Инициализация одного компонента textfield, отображённого в документе -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field'));
</script>

Пожалуйста, посмотрите пример быстрого старта на codepen для полного примера.

Использование NPM

Этот гайд предполагает, что у вас настроено webpack для компиляции Sass в CSS. Для настройки webpack, пожалуйста, посмотрите полный руководство по началу работы. Вы также можете посмотреть окончательный код и результат в Material Starter Kit.

Установите модуль node textfield в ваш проект.

npm install @material/textfield

HTML

Пример использования компонента text field. Пожалуйста, посмотрите Textfield страницу компонента для дополнительных опций.

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-floating-label" id="my-label">Метка</span>
  <span class="mdc-line-ripple"></span>
</label>

CSS

Загрузите стили, необходимые для компонента text field.```scss @use "@material/floating-label/mdc-floating-label"; @use "@material/line-ripple/mdc-line-ripple"; @use "@material/notched-outline/mdc-notched-outline"; @use "@material/textfield";

@include textfield.core-styles;

#### JavaScript

Импортируйте модуль `MDCTextField` для инициализации компонента поля ввода.

```js
import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));

Это инициализирует компонент поля ввода на одном элементе с классом .mdc-text-field.

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

Нужна помощь?

Мы постоянно стремимся улучшить наши компоненты. Если GitHub Issues не соответствуют вашим потребностям, пожалуйста, посетите нас на нашем канале Discord.