DropdownLenyíló lista

A lenyíló lista egy felugró vezérlőben jeleníti meg a megadott tartalmat, és gyakran a Menü komponenssel együtt használják.

Használat

A komponens importálása:

import 'mdui/components/dropdown.js';

A komponens TypeScript-típusának importálása:

import type { Dropdown } from 'mdui/components/dropdown.js';

Példa:

lenyíló lista megnyitása

1. elem

2. elem

<mdui-dropdown>
  <mdui-button slot="trigger">lenyíló lista megnyitása</mdui-button>
  <mdui-menu>
    <mdui-menu-item>1. elem</mdui-menu-item>
    <mdui-menu-item>2. elem</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Ha a lenyíló listában menüt használ, alapértelmezés szerint a menüpontra kattintva a lenyíló lista automatikusan bezáródik. A stay-open-on-click attribútum hozzáadásával a menüpontra kattintva a lenyíló lista nyitva marad.

lenyíló lista megnyitása

1. elem

2. elem

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">lenyíló lista megnyitása</mdui-button>
  <mdui-menu>
    <mdui-menu-item>1. elem</mdui-menu-item>
    <mdui-menu-item>2. elem</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Forrás

Nyitás/zárás késleltetése

Ha a trigger="hover" be van állítva, az open-delay és close-delay attribútumokkal beállíthatja a nyitás és zárás késleltetését.

lenyíló lista megnyitása

1. elem

2. elem

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">lenyíló lista megnyitása</mdui-button>
  <mdui-menu>
    <mdui-menu-item>1. elem</mdui-menu-item>
    <mdui-menu-item>2. elem</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`open`	`open`	`boolean`	`false`
A lenyíló lista nyitva van-e.
`disabled`	`disabled`	`boolean`	`false`
A lenyíló lista letiltása.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
A lenyíló lista kiváltási módja, több érték is megadható szóközzel elválasztva. Lehetséges értékek: `click`: Kattintásra aktiválódik `hover`: Egérrel fölé vive aktiválódik `focus`: Fókuszáláskor aktiválódik `contextmenu`: Jobb egérgombos kattintásra vagy hosszú érintésre aktiválódik `manual`: Csak programozottan lehet megnyitni és bezárni a lenyíló listát, más kiváltási mód nem adható meg
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
A lenyíló lista tartalmának pozíciója. Lehetséges értékek: `auto`: Automatikus pozíció meghatározás `top-start`: Fent, balra igazítva `top`: Fent, középre igazítva `top-end`: Fent, jobbra igazítva `bottom-start`: Lent, balra igazítva `bottom`: Lent, középre igazítva `bottom-end`: Lent, jobbra igazítva `left-start`: Balra, felülre igazítva `left`: Balra, középre igazítva `left-end`: Balra, alulra igazítva `right-start`: Jobbra, felülre igazítva `right`: Jobbra, középre igazítva `right-end`: Jobbra, alulra igazítva
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
A `<mdui-menu-item>` elemre kattintás után a lenyíló lista nyitva maradjon-e.
`open-delay`	`openDelay`	`number`	`150`
Az egérrel fölé vive történő lenyíló lista nyitás késleltetése, ezredmásodpercben.
`close-delay`	`closeDelay`	`number`	`150`
Az egérrel fölé vive történő lenyíló lista zárás késleltetése, ezredmásodpercben.
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
A lenyíló lista a kurzor pozíciójában nyíljon-e meg, gyakran használatos a jobb egérgombos menü megnyitásához.

Események

Név
`open`
A lenyíló lista nyitásának kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a lenyíló lista megnyitása.
`opened`
A lenyíló lista nyitási animációjának befejezésekor aktiválódik az esemény.
`close`
A lenyíló lista zárásának kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a lenyíló lista bezárása.
`closed`
A lenyíló lista zárási animációjának befejezésekor aktiválódik az esemény.

Slots

Név
(alapértelmezett)
A lenyíló lista tartalma.
`trigger`
A lenyíló listát kiváltó elem, például egy `<mdui-button>` elem.

CSS Parts

Név
`trigger`
A lenyíló listát kiváltó elemek konténere, azaz a `trigger` slot konténere.
`panel`
A lenyíló lista tartalmának konténere.

CSS egyéni tulajdonságok

Név
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

Divider Elválasztó

Következő fejezet

Fab Lebegő műveletgomb

DropdownLenyíló lista

Használat

Példák

Letiltott állapot

Megnyitás pozíciója

Aktiválási mód

Megnyitás a kurzor pozíciójában

A menü nyitva tartása kattintáskor

Nyitás/zárás késleltetése

API

Tulajdonságok

Események

Slots

CSS Parts

CSS egyéni tulajdonságok