CheckboxCheckbox

Checkbox umożliwia wybranie jednej lub wielu opcji z zestawu lub przełączenie stanu włącz/wyłącz dla pojedynczej opcji.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/checkbox.js';

Zaimportuj typ TypeScript komponentu:

import type { Checkbox } from 'mdui/components/checkbox.js';

Przykład użycia:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

Za pomocą atrybutów unchecked-icon, checked-icon, indeterminate-icon można ustawić odpowiednio ikony Material Icons dla stanu niezaznaczonego, zaznaczonego i nieokreślonego. Można je również ustawić za pomocą slotów unchecked-icon, checked-icon, indeterminate-icon.

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`disabled`	`disabled`	`boolean`	`false`
Określa, czy checkbox jest wyłączony.
`checked`	`checked`	`boolean`	`false`
Określa, czy checkbox jest zaznaczony.
	`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
`indeterminate`	`indeterminate`	`boolean`	`false`
Określa, czy checkbox jest w stanie nieokreślonym.
`required`	`required`	`boolean`	`false`
Określa, czy zaznaczenie tego checkboxa 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 checkboxa, która zostanie wysłana wraz z danymi formularza
`value`	`value`	`string`	`'on'`
Wartość checkboxa, która zostanie wysłana wraz z danymi formularza
`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"`
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Nazwa ikony Material Icons dla stanu nieokreślonego. Można również ustawić za pomocą `slot="indeterminate-icon"`
	`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
(domyślny)
Tekst checkboxa
`unchecked-icon`
Ikona dla stanu niezaznaczonego
`checked-icon`
Ikona dla stanu zaznaczonego
`indeterminate-icon`
Ikona dla stanu nieokreślonego

CSS Parts

Nazwa
`control`
Kontener ikony po lewej stronie
`unchecked-icon`
Ikona dla stanu niezaznaczonego
`checked-icon`
Ikona dla stanu zaznaczonego
`indeterminate-icon`
Ikona dla stanu nieokreślonego
`label`
Tekst checkboxa

Poprzedni rozdział

Card Karta

Następny rozdział

Chip Chip

CheckboxCheckbox

Sposób użycia

Przykłady

Stan zaznaczenia

Stan wyłączony

Stan nieokreślony

Ikona

API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts