Radio
<pc-radio>Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Radios allow the user to select a single option from a radio group.
Additional demonstrations can be found in the radio group demos.
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
value | The radio’s value. When selected, the radio group will receive this value. Typ: string | undefined |
| ‐ |
appearance | The radio’s visual appearance. Typ: "default" | "segmented" |
| "default" |
size | The radio’s size. When used inside a radio group, the size will be determined by the radio group’s size so this attribute can typically be omitted. Typ: "small" | "medium" | "large" | undefined |
| ‐ |
disabled | Disables the radio. Typ: boolean |
| false |
updateComplete | Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde. | ‐ |
Erfahre mehr über Attribute und Eigenschaften.
| Name | Beschreibung |
|---|---|
| (Standard) | The radio’s label. |
Erfahre mehr über die Benutzung von Slots.
| Name | Beschreibung | Event‐Detail |
|---|---|---|
focus | Emitted when the radio gains focus. | ‐ |
blur | Emitted when the radio loses focus (i.e., is blurred). | ‐ |
Erfahre mehr über Events.
| Name | Beschreibung | Standard |
|---|---|---|
--checked-background-color | The background colour for checked radios. This does not apply for segmented radios. | var(--pc-form-control-activated-color) |
--checked-icon-scale | The scale of the icon for checked radios. This does not apply for segmented radios. | 0.8 |
Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.
| Name | Beschreibung |
|---|---|
control | The circular container that wraps the radio’s checked state. |
checked-icon | The checked icon, an <svg> element. |
label | The radio’s label. |
Erfahre mehr über das Anpassen von CSS‐Parts.
Wenn du den Auto‐Loader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du dich für „Cherry‐Picking“ entschieden hast, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/radio/radio.js"></script>Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/radio/radio.js";Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "placer-toolkit/dist/components/radio/radio.js";