Dropdown
Die Dropdown-Komponente zeigt Inhalte in einem schwebenden Element an und wird oft zusammen mit der Menü-Komponente verwendet.
Verwendung
Importieren Sie die Komponente nach Bedarf:
import 'mdui/components/dropdown.js';
Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:
import type { Dropdown } from 'mdui/components/dropdown.js';
Beispiel:
<mdui-dropdown>
<mdui-button slot="trigger">Dropdown öffnen</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>Öffnungsposition
Mit dem Attribut placement legen Sie die Öffnungsposition der Dropdown-Komponente fest.
Auslösemechanismus
Mit dem Attribut trigger legen Sie fest, wie die Dropdown-Komponente ausgelöst wird.
An der Mausposition öffnen
Mit dem Attribut open-on-pointer wird die Dropdown-Komponente an der Mausposition geöffnet. Das wird oft zusammen mit trigger="contextmenu" verwendet, um per Rechtsklick ein Kontextmenü zu öffnen.
Menü geöffnet halten
Wenn Sie in der Dropdown-Komponente ein Menü verwenden, schließt sich die Dropdown-Komponente standardmäßig automatisch, wenn Sie auf einen Menüpunkt klicken. Mit dem Attribut stay-open-on-click bleibt sie geöffnet.
Verzögerung beim Öffnen/Schließen
Wenn trigger="hover" gesetzt ist, können Sie mit den Attributen open-delay und close-delay die Verzögerung beim Öffnen und Schließen festlegen.
API
Eigenschaften
| Attribut | Property | Reflect | Typ | Standard |
|---|---|---|---|---|
open | open | boolean | false | |
Öffnet das Dropdown. | ||||
disabled | disabled | boolean | false | |
Deaktiviert das Dropdown. | ||||
trigger | trigger | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' | |
Definiert, wie das Dropdown geöffnet wird. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte:
| ||||
placement | placement | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' | |
Legt die Position des Dropdowns fest. Mögliche Werte:
| ||||
stay-open-on-click | stayOpenOnClick | boolean | false | |
Verhindert, dass das Dropdown geschlossen wird, wenn ein | ||||
open-delay | openDelay | number | 150 | |
Legt die Verzögerung (in ms) für das Öffnen des Dropdowns bei Mouseover fest. | ||||
close-delay | closeDelay | number | 150 | |
Legt die Verzögerung (in ms) für das Schließen des Dropdowns bei Mouseover fest. | ||||
open-on-pointer | openOnPointer | boolean | false | |
Öffnet das Dropdown an der Zeigerposition. Dies wird typischerweise für Kontextmenüs verwendet. | ||||
Ereignisse
| Name |
|---|
open |
Wird ausgelöst, wenn das Dropdown beginnt, sich zu öffnen. Kann mit |
opened |
Wird ausgelöst, nachdem das Dropdown geöffnet wurde und die Animationen abgeschlossen sind. |
close |
Wird ausgelöst, wenn das Dropdown beginnt, sich zu schließen. Kann mit |
closed |
Wird ausgelöst, nachdem das Dropdown geschlossen wurde und die Animationen abgeschlossen sind. |
Slots
| Name |
|---|
| Standard |
Der Inhalt des Dropdowns. |
trigger |
Das Element, das das Dropdown auslöst, z. B. ein |
CSS Custom Property
| Name |
|---|
--z-index |
Der CSS |