SwitchPrzełącznik

Przełącznik pozwala przełączać stan włącz/wyłącz dla pojedynczej opcji, umożliwiając łatwą regulację ustawień.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/switch.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

<mdui-switch></mdui-switch>

Możesz ustawić atrybut unchecked-icon, aby określić ikonę Material Icons dla stanu niezaznaczonego, oraz atrybut checked-icon dla stanu zaznaczonego. Możesz również użyć slotów unchecked-icon i checked-icon do dostosowania elementów ikony.

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`disabled`	`disabled`	`boolean`	`false`
Określa, czy przełącznik jest wyłączony.
`checked`	`checked`	`boolean`	`false`
Określa, czy przełącznik jest włączony.
	`defaultChecked`	`boolean`	`false`
Domyślny stan zaznaczenia. Po zresetowaniu formularza zostanie przywrócony do tego stanu. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu niezaznaczonego. Można również ustawić za pomocą `slot="unchecked-icon"`
`checked-icon`	`checkedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą `slot="checked-icon"` Domyślnie jest to ikona `check`, można przekazać pusty ciąg znaków, aby usunąć domyślną ikonę
`required`	`required`	`boolean`	`false`
Określa, czy zaznaczenie tego przełącznika jest wymagane podczas przesyłania formularza.
`form`	`form`	`string`	-
Powiązany element `<form>`. Wartość tego atrybutu powinna być `id` elementu `<form>` na tej samej stronie. Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu `<form>`. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu `<form>`.
`name`	`name`	`string`	`''`
Nazwa przełącznika, która zostanie wysłana wraz z danymi formularza
`value`	`value`	`string`	`'on'`
Wartość przełącznika, która zostanie wysłana wraz z danymi formularza
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`string`	-
Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Metody

Nazwa	Parametry	Zwraca
`checkValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`
`reportValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`. Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
`setCustomValidity`	`message: string`	`void`
Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`change`
Wywoływane po zmianie stanu zaznaczenia
`input`
Wywoływane po zmianie stanu zaznaczenia
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji

Slots

Nazwa
`unchecked-icon`
Element dla stanu niezaznaczonego
`checked-icon`
Element dla stanu zaznaczonego

CSS Parts

Nazwa
`track`
Tor
`thumb`
Kontener ikony
`unchecked-icon`
Ikona dla stanu niezaznaczonego
`checked-icon`
Ikona dla stanu zaznaczonego

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów toru komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--shape-corner-thumb`
Wielkość zaokrąglenia rogów kontenera ikony komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Poprzedni rozdział

Snackbar Snackbar

Następny rozdział

Tabs Zakładka

SwitchPrzełącznik

Sposób użycia

Przykłady

Stan zaznaczenia

Stan wyłączony

Ikona