Toggle

shadow

Toggle elements are small interactive controls that allow you to switch between two states. You can activate them with a click of the mouse. They are most often used to activate and deactivate functionalities or to switch between showing and hiding other elements.

Basic Usage

Colors

Attributes and Properties

checked

Description	Ak true, toggle je aktivovaný.
Attribute	checked
Type	boolean
Default	false

color

Description	Farba, ktorá sa má použiť z palety farieb vašej aplikácie. Predvolené možnosti sú: "primary", "success", "warning", "danger", "complete", a "dark". Pre viac informácií o farbách navštívte Základy prispôsobenia.
Attribute	color
Type	"complete" ｜ "danger" ｜ "dark" ｜ "primary" ｜ "success" ｜ "warning" ｜ string ｜ undefined
Default	undefined

disabled

Description	Ak true, s toggle elementom nie je možné interagovať.
Attribute	disabled
Type	boolean
Default	false

name

Description	Definuje name atribút, ktorý je dôležitý napríklad pri použití vo formulároch.
Attribute	name
Type	string
Default	this.inputId

Events

Name	Description
change	Vyvolaný pri zmene stavu elementu.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
input	Odkazuje na input element typu checkbox
toggle	Odkazuje na vnútorný div obaľovací element

CSS Custom Properties

Name	Description
--wj-toggle-border-radius	Border radius of the toggle track
--wj-toggle-color-base	Background of the toggle handle
--wj-toggle-handle-border-radius	Background of the toggle handle when checked
--wj-toggle-handle-color	Border radius of the toggle handle
--wj-toggle-handle-height	Box shadow of the toggle handle
--wj-toggle-handle-shadow	Height of the toggle handle
--wj-toggle-handle-shadow-checked	Maximum height of the toggle handle
--wj-toggle-handle-width	Horizontal spacing around the toggle handle
--wj-toggle-height	Transition of the toggle handle
--wj-toggle-width	Width of the toggle handle

Slots

Name	Description
``	Predvolené umiestnenie obsahu elementu.