Dropdown Item
<pc-dropdown-item> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Represents an individual item within a dropdown menu, supporting standard items, checkboxes and submenus.
This component must be used as a child of <pc-dropdown>. Additional demonstrations can be found in the dropdown demos.
Eigenschaften#
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
appearance | The type of menu item to render. Typ: "default"
| "primary"
| "success"
| "warning"
| "danger" |
| "default" |
value | An optional value for the menu item. This is useful for determining which item was selected when listening to the dropdown’s pc-select event.Typ: string | undefined |
| ‐ |
type | The dropdown item’s type. Typ: "normal" | "checkbox" |
| "normal" |
checked | Set to true to check the dropdown item by default. This is only valid when the type attribute/property is set to checkbox.Typ: boolean |
| false |
disabled | Disables the dropdown item. Typ: boolean |
| false |
submenuOpen | Decides whether the submenu is currently open. Typ: boolean |
| false |
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 dropdown item’s label. |
icon | An optional icon to display before the label. |
details | Additional content or details to display after the label. |
submenu | Submenu items, typically <pc-dropdown-item> elements, to create a nested menu. |
Erfahre mehr über die Benutzung von Slots.
Methoden#
| Name | Beschreibung | Argumente |
|---|---|---|
openSubmenu() | Opens the submenu. | ‐ |
closeSubmenu() | Closes the submenu. | ‐ |
Erfahre mehr über Methoden.
Events#
| Name | Beschreibung | Event‐Detail |
|---|---|---|
pc-focus | Emitted when the dropdown item gains focus. | ‐ |
pc-blur | Emitted when the dropdown item loses focus. | ‐ |
Erfahre mehr über Events.
Parts#
| Name | Beschreibung |
|---|---|
checkmark | The checkmark icon (a <pc-icon> element) when the item is a checkbox. |
checkmark-svg | The svg part in the checkmark’s <pc-icon> element. |
icon | The container for the icon slot. |
label | The container for the label slot. |
details | The container for the details slot. |
submenu-icon | The submenu indicator icon (a <pc-icon> element). |
submenu-icon-svg | The svg part in the submenu icon’s <pc-icon> element. |
submenu | The submenu container. |
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/dropdown-item/dropdown-item.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/dropdown-item/dropdown-item.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/dropdown-item/dropdown-item.js";Abhängigkeiten#
Diese Komponente importiert automatisch folgende Komponenten: