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-buttonslot="trigger"> Dropdown<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-item><pc-iconlibrary="default"icon-style="solid"name="scissors"slot="icon"></pc-icon> Cut</pc-dropdown-item><pc-dropdown-item><pc-iconlibrary="default"icon-style="solid"name="copy"slot="icon"></pc-icon> Copy</pc-dropdown-item><pc-dropdown-item><pc-iconlibrary="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-itemslot="submenu"value="show-all-images"> Show all images</pc-dropdown-item><pc-dropdown-itemslot="submenu"value="show-thumbnails"> Show thumbnails</pc-dropdown-item></pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemtype="checkbox"checked> Emoji shortcuts</pc-dropdown-item><pc-dropdown-itemtype="checkbox"checked> Word wrap</pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemappearance="danger"><pc-iconlibrary="default"icon-style="solid"name="trash"slot="icon"></pc-icon> Delete</pc-dropdown-item></pc-dropdown>
CodeEdit
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.
<divclass="dropdown-selection"><pc-dropdown><pc-buttonslot="trigger"> View<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-itemvalue="full-screen">Enter full screen</pc-dropdown-item><pc-dropdown-itemvalue="actual-size">Actual size</pc-dropdown-item><pc-dropdown-itemvalue="zoom-in">Zoom in</pc-dropdown-item><pc-dropdown-itemvalue="zoom-out">Zoom out</pc-dropdown-item></pc-dropdown></div><script>constcontainer=document.querySelector(".dropdown-selection");constdropdown=container.querySelector("pc-dropdown");dropdown.addEventListener("pc-select",(event)=>{console.log(event.detail.item.value);});</script>
CodeEdit
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.
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.
<pc-dropdownclass="dropdown-checkboxes"><pc-buttonslot="trigger"> View<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-itemtype="checkbox"value="show-canvas"checked> Show canvas</pc-dropdown-item><pc-dropdown-itemtype="checkbox"value="show-grid"checked> Show grid</pc-dropdown-item><pc-dropdown-itemtype="checkbox"value="show-source"> Show source</pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemvalue="preferences">Preferences…</pc-dropdown-item></pc-dropdown><script>constdropdown=document.querySelector(".dropdown-checkboxes");dropdown.addEventListener("pc-select",(event)=>{if(event.detail.item.type==="checkbox"){console.log(event.detail.item.value,event.detail.item.checked?"checked":"unchecked");}else{console.log(event.detail.item.value);}});</script>
CodeEdit
When a checkable option exists anywhere in the dropdown, all items will receive additional padding so they align properly.
Radio items
You can turn a dropdown item into a radio option by setting type="radio". Radio items can be grouped together using a <div role="group"> container. Only one item in a group can be selected at a time.
If a <div role="group"> container is used, only radio items within the same group are mutually exclusive.
If no <div role="group"> container is used, the radio items are automatically grouped per dropdown layer, but all dropdown items in that layer must be a radio item.
At the root layer, all ungrouped radio items in the root are grouped together.
Inside a submenu, all ungrouped radio items within that submenu are grouped together.
Radio selection does not cross layers, so selecting a radio in a submenu will not affect items in other submenus or the root.
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.
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.
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.
CDN (Skript‐Tag)CDN (Import)npm (Import)
Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
Ui! Du bist in die gefährlichen Lande von Placer Toolkit geraten. Version 0 ist veraltet und entspricht nicht den EU‐Datenschutzstandards, einschließlich DSGVO.
Willst du die neuesten Kräfte, Sicherheit und Compliance? Bleib bei der aktuellen Version von Placer Toolkit!
Ups!Aufladen!
Unsere Website ist zu 100 % frei von Cookies! Wir legen großen Wert auf deine Privatsphäre und speichern daher keinerlei Cookies oder persönliche Informationen über dich.
Dein Browserverlauf bleibt sauber und deine Daten sind geschützt, ganz im Einklang mit modernen Datenschutzstandards wie der DSGVO. Genieße deinen Besuch ganz ohne digitale Cookies! 🍪🚫