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

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

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

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

import 'mdui/components/button-icon.js';

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

import type { ButtonIcon } from 'mdui/components/button-icon.js';

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

<mdui-button-icon icon="search"></mdui-button-icon>

Примеры

Иконка

Используйте атрибут icon для указания названия иконки Material Icons. Также можно указать элемент иконки через слот по умолчанию.

<mdui-button-icon icon="search"></mdui-button-icon>
<mdui-button-icon>
  <mdui-icon name="search"></mdui-icon>
</mdui-button-icon>

Исходный код

Варианты

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

<mdui-button-icon variant="standard" icon="search"></mdui-button-icon>
<mdui-button-icon variant="filled" icon="search"></mdui-button-icon>
<mdui-button-icon variant="tonal" icon="search"></mdui-button-icon>
<mdui-button-icon variant="outlined" icon="search"></mdui-button-icon>

Исходный код

Выбираемое состояние

Добавьте атрибут selectable, чтобы кнопка с иконкой могла быть выбрана.

<mdui-button-icon selectable icon="favorite_border"></mdui-button-icon>

Исходный код

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

<mdui-button-icon selectable icon="favorite_border" selected-icon="favorite"></mdui-button-icon>
<mdui-button-icon selectable icon="favorite_border">
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-button-icon>

Исходный код

После выбора кнопки атрибут selected получает значение true. Также можно добавить атрибут selected, чтобы кнопка по умолчанию была в выбранном состоянии.

<mdui-button-icon selectable selected icon="favorite_border" selected-icon="favorite"></mdui-button-icon>

Исходный код

Ссылка

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

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

Исходный код

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

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

<mdui-button-icon disabled icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading disabled icon="search" variant="tonal"></mdui-button-icon>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'standard' \| 'filled' \| 'tonal' \| 'outlined'`	`'standard'`
Вариант кнопки с иконкой. Возможные значения: `standard` — подходит для действий самого низкого приоритета `filled` — выраженный визуальный акцент, подходит для действий высокого приоритета `tonal` — визуальный акцент, промежуточный между `filled` и `outlined`, подходит для действий среднего и высокого приоритета `outlined` — подходит для действий среднего приоритета
`icon`	`icon`	`string`	-
Имя иконки Material Icons. Можно задать через слот по умолчанию.
`selected-icon`	`selectedIcon`	`string`	-
Имя иконки Material Icons в выбранном состоянии. Можно задать через `slot="selected-icon"`.
`selectable`	`selectable`	`boolean`	`false`
Определяет, можно ли выбрать.
`selected`	`selected`	`boolean`	`false`
Определяет, выбрана ли кнопка.
`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`
Срабатывает при потере фокуса.
`change`
Срабатывает при изменении состояния выбора.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Элемент иконки.
`selected-icon`
Элемент иконки, отображаемый в выбранном состоянии.

CSS Parts

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

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

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

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

Button Кнопка

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

Card Карточка