Switch
<gstock-switch>
|
GstockSwitch
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
title
|
The title of the switch. |
|
string
|
''
|
helpText
help-text
|
The input’s help text. If you need to display HTML, use the
help-text slot instead.
|
string
|
''
|
|
name
|
The name of the switch, submitted as a name/value pair with form data. |
|
string
|
''
|
value
|
The current value of the switch, submitted as a name/value pair with form data. |
|
string
|
-
|
size
|
The size of the switch. |
|
'small' | 'medium' | 'large'
|
'medium'
|
disabled
|
Disables the switch. |
|
boolean
|
false
|
checked
|
Draws the switch in a checked state. |
|
boolean
|
false
|
defaultChecked
|
The default value of the form control. Primarily used for resetting the form control. |
boolean
|
false
|
|
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the
form control outside of a form and associate it with the form that has
this id. The form must be in the same document or shadow root
for this to work.
|
|
string
|
''
|
required
|
Makes the switch a required field. |
|
boolean
|
false
|
validity
|
Gets the validity state object |
-
|
-
|
|
validationMessage
|
Gets the validation message |
-
|
-
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-blur-event
|
onGstockBlurEvent
|
Emitted when the switch loses focus. | - |
gstock-change-event
|
onGstockChangeEvent
|
Emitted when the checked state changes. | - |
gstock-focus-event
|
onGstockFocusEvent
|
Emitted when the switch gains focus. | - |
gstock-input-event
|
onGstockInputEvent
|
Emitted when the switch receives input. | - |
gstock-invalid-event
|
onGstockInvalidEvent
|
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
default
|
Content of the switch. |
Aprende más sobre slots .
Métodos
| Nombre | Descripción |
|---|---|
click( )
|
Simulates a click on the switch. |
focus(
|
Sets focus on the switch. |
blur( )
|
Removes focus from the switch. |
checkValidity( )
|
Checks for validity but does not show a validation message. Returns
true when valid and false when invalid.
|
getForm( )
|
Gets the associated form, if one exists. |
reportValidity( )
|
Checks for validity and shows the browser’s validation message if the control is invalid. |
setCustomValidity(
|
Sets a custom validation message. Pass an empty string to restore validity. |
Aprende más sobre métodos .
Partes
| Nombre | Descripción |
|---|---|
base
|
The component’s base wrapper. |
control
|
The container that wraps the control. |
thumb
|
The container that wraps the thumb. |
label
|
The container that wraps the switch’s label. |
Aprende más sobre partes CSS .