Option
<pc-option> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Options define the selectable items within various form controls such as a select.
Additional demonstrations can be found in the select demos.
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
defaultLabel | The default label, generated from the element contents. This is equal to the label property in most cases.Typ: string |
| "" |
value | The option’s value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values must not contain spaces, as spaces are used as delimiters when listing multiple values. Typ: string |
| "" |
disabled | Disables the option, preventing selection. Typ: boolean |
| false |
defaultSelectedselected | Selects an option initially. Typ: boolean |
| false |
label | The option’s plain text label. This is usually automatically generated, but can be useful to provide manually for cases involving complex content. Typ: string |
| ‐ |
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 option’s label. |
prefix | Used to prepend an icon or similar element to the option. |
suffix | Used to append an icon or similar element to the option. |
Erfahre mehr über die Benutzung von Slots.
| Name | Beschreibung |
|---|---|
checked-icon | The checked icon, a <pc-icon> element. |
base | The component’s base wrapper. |
label | The option’s label. |
prefix | The container that wraps the prefix. |
suffix | The container that wraps the suffix. |
Erfahre mehr über das Anpassen von CSS‐Parts.
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, 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.4/cdn/components/option/option.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.4/cdn/components/option/option.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/option/option.js";Diese Komponente importiert automatisch folgende Komponenten: