FabПлавающая кнопка действия

Плавающая кнопка действия (FAB) используется для выделения основного действия на странице, размещая ключевое действие в легкодоступном месте.

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

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

import 'mdui/components/fab.js';

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

import type { Fab } from 'mdui/components/fab.js';

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

<mdui-fab icon="edit"></mdui-fab>

Примеры

Иконка

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

<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>

Исходный код

Расширенное состояние

Добавьте атрибут extended, чтобы перевести FAB в расширенное состояние; при этом текст из слота по умолчанию будет отображаться.

Compose

<mdui-fab extended icon="edit">Compose</mdui-fab>

Исходный код

Вариант

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

<mdui-fab variant="primary" icon="edit"></mdui-fab>
<mdui-fab variant="surface" icon="edit"></mdui-fab>
<mdui-fab variant="secondary" icon="edit"></mdui-fab>
<mdui-fab variant="tertiary" icon="edit"></mdui-fab>

Исходный код

Размер

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

<mdui-fab size="small" icon="edit"></mdui-fab>
<mdui-fab size="normal" icon="edit"></mdui-fab>
<mdui-fab size="large" icon="edit"></mdui-fab>

Исходный код

Ссылка

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

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

Исходный код

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

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

<mdui-fab disabled icon="edit"></mdui-fab>
<mdui-fab loading icon="edit"></mdui-fab>
<mdui-fab loading disabled icon="edit"></mdui-fab>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'primary' \| 'surface' \| 'secondary' \| 'tertiary'`	`'primary'`
Вариант FAB, различные варианты отличаются только цветом. Возможные значения: `primary` — цвет фона Primary container `surface` — цвет фона Surface container high `secondary` — цвет фона Secondary container `tertiary` — цвет фона Tertiary container
`size`	`size`	`'normal' \| 'small' \| 'large'`	`'normal'`
Размер FAB. Возможные значения: `normal` — обычный размер `small` — маленький `large` — большой
`icon`	`icon`	`string`	-
Имя иконки Material Icons. Можно задать через `slot="icon"`.
`extended`	`extended`	`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`
Срабатывает при потере фокуса.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

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

CSS Parts

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

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

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

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

Dropdown Выпадающее меню

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

Icon Иконка