SwitchSwitch

O componente switch é usado para alternar o estado ligado/desligado de uma única opção, com um design de interação intuitivo que permite aos usuários ajustar as configurações facilmente.

Como usar

Importe o componente conforme necessário:

import 'mdui/components/switch.js';

Importe o tipo TypeScript do componente conforme necessário:

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

Exemplo de uso:

<mdui-switch></mdui-switch>

Você pode usar o atributo unchecked-icon para definir o ícone do Material Icons no estado não selecionado e o atributo checked-icon para definir o ícone no estado selecionado. Você também pode usar os slots unchecked-icon e checked-icon para personalizar os elementos de ícone dos estados não selecionado e selecionado.

<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>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`checked`	`checked`	`boolean`	`false`
Define se o componente está selecionado.
	`defaultChecked`	`boolean`	`false`
Estado de seleção padrão. Ao redefinir o formulário, será restaurado para este estado. Esta propriedade só pode ser definida via propriedade JavaScript.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nome do ícone Material Icons para o estado não selecionado. Também pode ser definido via `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nome do ícone Material Icons para o estado selecionado. Também pode ser definido via `slot="checked-icon"`. O padrão é o ícone `check`. Pode-se passar uma string vazia para remover o ícone padrão.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que este switch esteja selecionado.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`.
`name`	`name`	`string`	`''`
O nome do switch, que será enviado com os dados do formulário.
`value`	`value`	`string`	`'on'`
O valor do switch, que será enviado com os dados do formulário.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Métodos

Nome	Parâmetros	Retorno
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`change`
Disparado quando o estado de seleção muda.
`input`
Disparado quando o estado de seleção muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
`unchecked-icon`
Elemento no estado não selecionado.
`checked-icon`
Elemento no estado selecionado.

CSS Parts

Nome
`track`
Trilha.
`thumb`
Contêiner do ícone.
`unchecked-icon`
Ícone no estado não selecionado.
`checked-icon`
Ícone no estado selecionado.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada da trilha do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--shape-corner-thumb`
Tamanho da borda arredondada do contêiner do ícone do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Snackbar Snackbar

Próximo capítulo

Tabs Abas

SwitchSwitch

Como usar

Exemplos

Estado selecionado

Estado desabilitado

Ícone