Dropdown
<pc-dropdown> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Dropdowns display a list of options that can be triggered by keyboard navigation, submenus and various customisation options.
A dropdown consists of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
This component is designed to work well with dropdown items to provide a list of options the user can select from. However, dropdowns can also be used in low‐level applications. The API gives you complete control over showing, hiding and positioning the panel.
<pc-dropdown>
<pc-button slot="trigger">
Dropdown
<pc-icon
library="default"
icon-style="solid"
name="chevron-down"
slot="suffix"
></pc-icon>
</pc-button>
<pc-dropdown-item>
<pc-icon
library="default"
icon-style="solid"
name="scissors"
slot="icon"
></pc-icon>
Cut
</pc-dropdown-item>
<pc-dropdown-item>
<pc-icon
library="default"
icon-style="solid"
name="copy"
slot="icon"
></pc-icon>
Copy
</pc-dropdown-item>
<pc-dropdown-item>
<pc-icon
library="default"
icon-style="solid"
name="paste"
slot="icon"
></pc-icon>
Paste
</pc-dropdown-item>
<pc-divider></pc-divider>
<pc-dropdown-item>
Show images
<pc-dropdown-item
slot="submenu"
value="show-all-images"
>
Show all images
</pc-dropdown-item>
<pc-dropdown-item
slot="submenu"
value="show-thumbnails"
>
Show thumbnails
</pc-dropdown-item>
</pc-dropdown-item>
<pc-divider></pc-divider>
<pc-dropdown-item type="checkbox" checked>
Emoji shortcuts
</pc-dropdown-item>
<pc-dropdown-item type="checkbox" checked>
Word wrap
</pc-dropdown-item>
<pc-divider></pc-divider>
<pc-dropdown-item appearance="danger">
<pc-icon
library="default"
icon-style="solid"
name="trash"
slot="icon"
></pc-icon>
Delete
</pc-dropdown-item>
</pc-dropdown>Demos#
Getting the selected item#
When an item is selected, the pc-select event will be emitted by the dropdown. You can inspect event.detail.item to get a reference to the selected item. If you’ve provided a value for each dropdown item, it will be available in event.detail.item.value.
To keep the dropdown open after selection, call event.preventDefault() in the pc-select event’s callback.
Showing icons#
Use the icon slot to add icons to dropdown items. This works best with the Icon component.
Showing labels and dividers#
Use the <h1>–<h6> elements to add labels and the <pc-divider> element for dividers.
Showing details#
Use the details slot to display details, such as keyboard shortcuts, inside dropdown items.
Checkable items#
You can turn a dropdown item into a checkable option by setting type="checkbox". Add the checked attribute to make it checked initially. When clicked, the item’s checked state will toggle and the dropdown will close. You can cancel the pc-select event if you want to keep it open instead.
When a checkable option exists anywhere in the dropdown, all items will receive additional padding so they align properly.
Destructive items#
Add appearance="danger" to any dropdown item to highlight it’s a dangerous action.
Placement#
The preferred placement of the dropdown can be set with the placement attribute. Note: The actual position may vary to ensure the panel remains in the viewport.
Distance#
The distance from the panel to the trigger can be customised using the distance attribute. This value is specified in pixels.
Skidding#
The skidding of the panel along the trigger can be customised using the skidding attribute. This value is specified in pixels.
Submenus#
To create submenus, nest dropdown items inside of a dropdown item and assign slot="submenu" to each one. You can also add dividers as needed.
Dropdown items that have a submenu will not dispatch the pc-select event. However, items inside the submenu will, unless they also have a submenu.
As a UX best practice, avoid using more than one level of submenu when possible.
Disabling items#
Add the disabled attribute to any dropdown item to disable it.
Eigenschaften#
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
open | Opens or closes the dropdown. Typ: boolean |
| false |
size | The dropdown’s size. Typ: "small" | "medium" | "large" |
| "medium" |
placement | The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if the preferred placement doesn’t have enough room. Typ: "top"
| "top-start"
| "top-end"
| "bottom"
| "bottom-start"
| "bottom-end"
| "right"
| "right-start"
| "right-end"
| "left"
| "left-start"
| "left-end" |
| "bottom-start" |
distance | The distance of the dropdown menu from its trigger. Typ: number |
| 0 |
skidding | The skidding of the dropdown menu along its trigger. Typ: number |
| 0 |
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’s items, typically <pc-dropdown-item> elements. |
trigger | The element that triggers the dropdown, such as a <pc-button> or <button>. |
Erfahre mehr über die Benutzung von Slots.
Events#
| Name | Beschreibung | Event‐Detail |
|---|---|---|
pc-show | Emitted when the dropdown is about to show. | ‐ |
pc-after-show | Emitted when the dropdown has been shown. | ‐ |
pc-hide | Emitted when the dropdown is about to hide. | ‐ |
pc-after-hide | Emitted when the dropdown has been hidden. | ‐ |
pc-select | Emitted when an item in the dropdown is selected. | ‐ |
Erfahre mehr über Events.
Parts#
| Name | Beschreibung |
|---|---|
base | The component’s host element. |
menu | The dropdown menu 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/dropdown.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/dropdown.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/dropdown.js";Abhängigkeiten#
Diese Komponente importiert automatisch folgende Komponenten: