DropdownRozbalovací nabídka
Rozbalovací nabídka zobrazuje obsah ve vyskakovacím okně a často se používá společně s nabídkou.
Způsob použití
Importujte komponentu podle potřeby:
import 'mdui/components/dropdown.js';
Importujte TypeScript typy komponenty podle potřeby:
import type { Dropdown } from 'mdui/components/dropdown.js';
Příklad použití:
<mdui-dropdown>
<mdui-button slot="trigger">otevřít nabídku</mdui-button>
<mdui-menu>
<mdui-menu-item>Položka 1</mdui-menu-item>
<mdui-menu-item>Položka 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>Umístění otevření
Pomocí atributu placement můžete určit, kde se rozbalovací nabídka otevře.
Způsob spuštění
Pomocí atributu trigger můžete nastavit způsob spuštění rozbalovací nabídky.
Otevření na pozici kurzoru
Přidejte atribut open-on-pointer pro otevření rozbalovací nabídky na pozici kurzoru. Často se používá ve spojení s trigger="contextmenu" pro otevření nabídky pravým tlačítkem myši.
Udržení nabídky otevřené
Při použití nabídky v rozbalovací nabídce se po kliknutí na položku nabídky rozbalovací nabídka automaticky zavře. Přidáním atributu stay-open-on-click můžete při kliknutí na položku nabídky zachovat rozbalovací nabídku otevřenou.
Zpoždění otevření/zavření
Když je nastaveno trigger="hover", můžete pomocí atributů open-delay a close-delay nastavit zpoždění otevření a zavření.
API
Vlastnosti
| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|---|---|---|---|
open | open | boolean | false | |
Určuje, zda je rozbalovací nabídka otevřená. | ||||
disabled | disabled | boolean | false | |
Určuje, zda je rozbalovací nabídka zakázaná. | ||||
trigger | trigger | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' | |
Způsob spuštění rozbalovací nabídky. Lze zadat více hodnot oddělených mezerami. Možné hodnoty:
| ||||
placement | placement | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' | |
Umístění obsahu rozbalovací nabídky. Možné hodnoty:
| ||||
stay-open-on-click | stayOpenOnClick | boolean | false | |
Určuje, zda má rozbalovací nabídka zůstat otevřená po kliknutí na | ||||
open-delay | openDelay | number | 150 | |
Zpoždění (v ms) před otevřením při najetí myší. | ||||
close-delay | closeDelay | number | 150 | |
Zpoždění (v ms) před zavřením při najetí myší. | ||||
open-on-pointer | openOnPointer | boolean | false | |
Určuje, zda se má rozbalovací nabídka otevřít na pozici kurzoru při svém spuštění. Často se používá pro otevření kontextové nabídky. | ||||
Události
| Název |
|---|
open |
Spustí se na začátku otevírání rozbalovací nabídky. Otevření lze zabránit voláním |
opened |
Spustí se po dokončení animace otevření rozbalovací nabídky. |
close |
Spustí se na začátku zavírání rozbalovací nabídky. Zavření lze zabránit voláním |
closed |
Spustí se po dokončení animace zavření rozbalovací nabídky. |
Slots
| Název |
|---|
| (výchozí) |
Obsah rozbalovací nabídky. |
trigger |
Prvek, který spouští rozbalovací nabídku, např. prvek |
CSS Custom Properties
| Název |
|---|
--z-index |
Hodnota CSS |