SwitchПереключатель

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

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

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

import 'mdui/components/switch.js';

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

import type { Switch } from 'mdui/components/switch.js';

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

<mdui-switch></mdui-switch>

С помощью атрибута unchecked-icon можно задать иконку Material Icons для невыбранного состояния, а с помощью checked-icon — для выбранного. Также можно использовать слоты unchecked-icon и checked-icon.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли переключатель.
`checked`	`checked`	`boolean`	`false`
Определяет, включён ли переключатель.
	`defaultChecked`	`boolean`	`false`
Исходное состояние. При сбросе формы оно восстанавливается. Это свойство задаётся только через JavaScript.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Имя иконки Material Icons для выключенного состояния. Можно задать через `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Имя иконки Material Icons для включённого состояния. Можно задать через `slot="checked-icon"`. По умолчанию используется иконка `check`. Можно передать пустую строку, чтобы скрыть иконку по умолчанию.
`required`	`required`	`boolean`	`false`
Определяет, обязательно ли включить этот переключатель при отправке формы.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`name`	`name`	`string`	`''`
Имя переключателя, будет отправлено вместе с данными формы.
`value`	`value`	`string`	`'on'`
Значение переключателя, будет отправлено вместе с данными формы.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

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

События

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

Slots

Название
`unchecked-icon`
Элемент для выключенного состояния.
`checked-icon`
Элемент для включённого состояния.

CSS Parts

Название
`track`
Дорожка.
`thumb`
Контейнер иконки.
`unchecked-icon`
Иконка выключенного состояния.
`checked-icon`
Иконка включённого состояния.

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

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

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

Snackbar Снэкбар

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

Tabs Вкладки

SwitchПереключатель

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

Примеры

Состояние выбора

Отключенное состояние

Иконка