Switch
<pc-switch> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Switches allow the user to toggle an option on or off.
<pc-switch>Switch</pc-switch>This component works well with standard <form> elements. Please refer to the form controls page to learn more about form submission and client‐side validation.
Demos#
Checked#
Use the checked attribute to set the switch’s state to enabled.
Disabled#
Use the disabled attribute to disable the switch.
Sizes#
Use the size attribute to change a switch’s size.
Hint#
Add a descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.
Custom styles#
Use the available custom properties to change how the switch is styled.
Eigenschaften#
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
name | The name of the switch, submitted as a name/value pair with form data. Typ: string |
| "" |
value | The current value of the switch, submitted as a name/value pair with form data. Typ: string |
| ‐ |
size | The switch’s size. Typ: "small" | "medium" | "large" |
| "medium" |
disabled | Disables the switch. Typ: boolean |
| false |
checked | Enables the switch. Typ: boolean |
| false |
defaultChecked | The default value of the switch. Primarily used for resetting the switch. Typ: 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.Typ: string |
| "" |
required | Makes the switch a required field. Typ: boolean |
| false |
hint | The switch’s hint. if you need to display HTML, use the hint slot instead.Typ: string |
| "" |
validity | Gets the validity state object. |
| ‐ |
validationMessage | Gets the validation message. |
| ‐ |
updateComplete | Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde. | ‐ |
Erfahre mehr über Attribute und Eigenschaften.
Slots#
| Name | Beschreibung |
|---|---|
| (default) | The switch’s label. |
hint | Text that describes how to use the switch. Alternatively, you can use the hint attribute. |
Erfahre mehr über die Benutzung von Slots.
Methoden#
| Name | Beschreibung | Argumente |
|---|---|---|
click() | Simulates a click on the switch. | ‐ |
focus() | Focuses the switch. | options: FocusOptions |
blur() | Unfocuses/blurs the switch. | ‐ |
checkValidity() | Checks for validity but doesn’t 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. | message: string |
Erfahre mehr über Methoden.
Events#
| Name | Beschreibung | Event‐Detail |
|---|---|---|
pc-change | Emitted when the switch’s state changes. | ‐ |
pc-focus | Emitted when the switch gains focus. | ‐ |
pc-blur | Emitted when the switch loses focus (i.e., is blurred). | ‐ |
pc-input | Emitted when the switch receives input. | ‐ |
pc-invalid | Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | ‐ |
Erfahre mehr über Events.
Benutzerdefinierte Eigenschaften#
| Name | Beschreibung | Standard |
|---|---|---|
--width | The width of the switch. | calc(var(--height) * 1.75) |
--height | The height of the switch. | var(--pc-form-control-toggle-size) |
--thumb-size | The size of the thumb. | 0.75em |
Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.
Parts#
| Name | Beschreibung |
|---|---|
base | The component’s base wrapper. |
control | The control that houses the switch’s thumb. |
thumb | The switch’s thumb. |
label | The switch’s label. |
hint | The hint’s wrapper. |
Erfahre mehr über das Anpassen von CSS‐Parts.
Importieren#
Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/switch/switch.js"></script>Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/switch/switch.js";Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "placer-toolkit/dist/components/switch/switch.js";