SwitchSpínač

Spínač slouží k přepínání jedné možnosti mezi zapnuto a vypnuto a usnadňuje změnu nastavení.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/switch.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

<mdui-switch></mdui-switch>

Můžete nastavit ikonu Material Icons pro nevybraný stav pomocí atributu unchecked-icon a ikonu pro vybraný stav pomocí atributu checked-icon. Lze také přizpůsobit prvky ikon pro nevybraný a vybraný stav pomocí slotů unchecked-icon a 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>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`checked`	`checked`	`boolean`	`false`
Určuje, zda je prvek zapnutý.
	`defaultChecked`	`boolean`	`false`
Výchozí zapnutý stav. Při resetování formuláře se stav obnoví na tuto hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Název ikony z knihovny Material Icons pro vypnutý stav. Lze také nastavit pomocí `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Název ikony z knihovny Material Icons pro zapnutý stav. Lze také nastavit pomocí `slot="checked-icon"`. Výchozí je ikona `check`. Pro odstranění výchozí ikony lze předat prázdný řetězec.
`required`	`required`	`boolean`	`false`
Určuje, zda musí být při odesílání formuláře tento spínač zapnutý.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`name`	`name`	`string`	`''`
Název spínače, který se odešle spolu s daty formuláře.
`value`	`value`	`string`	`'on'`
Hodnota spínače, která se odešle spolu s daty formuláře.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se při změně stavu spínače.
`input`
Spustí se při změně stavu spínače.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

Slots

Název
`unchecked-icon`
Prvek pro vypnutý stav.
`checked-icon`
Prvek pro zapnutý stav.

CSS Parts

Název
`track`
Stopa.
`thumb`
Kontejner ikony.
`unchecked-icon`
Ikona pro vypnutý stav.
`checked-icon`
Ikona pro zapnutý stav.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů stopy komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--shape-corner-thumb`
Velikost zaoblení rohů kontejneru ikony komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

Snackbar Snackbar

Další kapitola

Tabs Záložky

SwitchSpínač

Způsob použití

Příklady

Vybraný stav

Zakázaný stav

Ikona