ButtonКнопка

Кнопки в основном используются для выполнения действий, таких как отправка электронных писем, публикация документов или оценка комментариев.

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

При необходимости импортируйте компонент:

import 'mdui/components/button.js';

При необходимости импортируйте типы TypeScript:

import type { Button } from 'mdui/components/button.js';

Пример использования:

Button

<mdui-button>Button</mdui-button>

Примеры

Варианты

Используйте атрибут variant для установки варианта кнопки.

Elevated

Filled

Tonal

Outlined

Text

<mdui-button variant="elevated">Elevated</mdui-button>
<mdui-button variant="filled">Filled</mdui-button>
<mdui-button variant="tonal">Tonal</mdui-button>
<mdui-button variant="outlined">Outlined</mdui-button>
<mdui-button variant="text">Text</mdui-button>

Исходный код

На всю ширину

Добавьте атрибут full-width, чтобы кнопка занимала всю ширину родительского элемента.

Button

<mdui-button full-width>Button</mdui-button>

Исходный код

Иконки

Установите атрибуты icon и end-icon, чтобы добавить иконки Material Icons слева и справа от кнопки соответственно. Также можно использовать слоты icon и end-icon для добавления элементов.

Icon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Исходный код

Ссылка

Установите атрибут href, чтобы превратить кнопку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

Исходный код

Отключённое состояние и состояние загрузки

Добавьте атрибут disabled, чтобы отключить кнопку; добавьте атрибут loading, чтобы добавить состояние загрузки.

Disabled

Loading & Disabled

<mdui-button disabled>Disabled</mdui-button>
<mdui-button loading>Loading</mdui-button>
<mdui-button loading disabled>Loading & Disabled</mdui-button>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
Вариант кнопки. Возможные значения: `elevated` — кнопка с тенью, подходит для визуального отделения от фона `filled` — выраженный визуальный акцент, подходит для финальных действий важных процессов, например «Сохранить», «Подтвердить» `tonal` — визуальный акцент, промежуточный между `filled` и `outlined`, подходит для действий среднего и высокого приоритета, например «Далее» в процессе `outlined` — кнопка с рамкой, подходит для действий среднего приоритета и второстепенных действий, например «Назад» `text` — текстовая кнопка, подходит для действий самого низкого приоритета
`full-width`	`fullWidth`	`boolean`	`false`
Определяет, растягивать ли на всю ширину родительского элемента.
`icon`	`icon`	`string`	-
Имя иконки Material Icons слева. Можно задать через `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons справа. Можно задать через `slot="end-icon"`.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.
`disabled`	`disabled`	`boolean`	`false`
Отключает элемент.
`loading`	`loading`	`boolean`	`false`
Переводит элемент в состояние загрузки.
`name`	`name`	`string`	`''`
Имя кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`value`	`value`	`string`	`''`
Значение кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Тип кнопки. По умолчанию `button`. Возможные значения: `submit` — эта кнопка отправляет данные формы на сервер `reset` — эта кнопка сбрасывает все компоненты к начальным значениям `button` — эта кнопка не имеет поведения по умолчанию Примечание: Это свойство действует, только если не задано свойство `href`.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`. Примечание: Это свойство действует, только если не задано свойство `href`.
`formaction`	`formAction`	`string`	-
Задаёт URL-адрес для отправки формы. Если это свойство задано, оно переопределяет атрибут `action` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Определяет способ кодирования данных при отправке формы на сервер. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию, если атрибут не указан `multipart/form-data` — используется, когда форма содержит элемент `<input type="file">` `text/plain` — добавлено в HTML5; используется для отладки Если это свойство задано, оно переопределяет атрибут `enctype` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Определяет HTTP-метод, который используется при отправке формы. Возможные значения: `post` — данные формы отправляются на сервер в теле запроса `get` — данные формы добавляются к URI формы после символа `?`, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы. Если это свойство задано, оно переопределяет атрибут `method` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Если задано, проверка формы при отправке не выполняется. Если задано, переопределяет атрибут `novalidate` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Определяет, где будет показан ответ, полученный после отправки формы. Возможные значения: `_self` — по умолчанию, открывается в текущем фрейме `_blank` — открывается в новом окне `_parent` — открывается в родительском фрейме `_top` — открывается во всём окне Если это свойство задано, оно переопределяет атрибут `target` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Текст кнопки.
`icon`
Элемент слева от кнопки.
`end-icon`
Элемент справа от кнопки.

CSS Parts

Название
`button`
Внутренний элемент `<button>` или `<a>`.
`label`
Текст кнопки.
`icon`
Иконка слева.
`end-icon`
Иконка справа.
`loading`
Элемент `<mdui-circular-progress>` в состоянии загрузки.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

BottomAppBar Нижняя панель приложения

Следующая глава

ButtonIcon Кнопка с иконкой