DropdownLista rozwijana

Komponent listy rozwijanej wyświetla określoną treść w wyskakującej kontrolce, często używany razem z komponentem Menu.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/dropdown.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

otwórz listę rozwijaną

Pozycja 1

Pozycja 2

<mdui-dropdown>
  <mdui-button slot="trigger">otwórz listę rozwijaną</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Pozycja 1</mdui-menu-item>
    <mdui-menu-item>Pozycja 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Gdy używasz menu w komponencie listy rozwijanej, domyślnie kliknięcie elementu menu automatycznie zamyka listę rozwijaną. Dodanie atrybutu stay-open-on-click pozwala zachować otwartą listę rozwijaną po kliknięciu elementu menu.

otwórz listę rozwijaną

Pozycja 1

Pozycja 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">otwórz listę rozwijaną</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Pozycja 1</mdui-menu-item>
    <mdui-menu-item>Pozycja 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Źródło

Opóźnienie otwierania/zamykania

Gdy ustawiony jest trigger="hover", możesz ustawić opóźnienie otwierania i zamykania za pomocą atrybutów open-delay i close-delay.

otwórz listę rozwijaną

Pozycja 1

Pozycja 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">otwórz listę rozwijaną</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Pozycja 1</mdui-menu-item>
    <mdui-menu-item>Pozycja 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`open`	`open`	`boolean`	`false`
Określa, czy lista rozwijana jest otwarta.
`disabled`	`disabled`	`boolean`	`false`
Określa, czy lista rozwijana jest wyłączona.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Sposób wyzwalania listy rozwijanej. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości: `click`: Wywoływane po kliknięciu `hover`: Wywoływane po najechaniu myszą `focus`: Wywoływane po otrzymaniu fokusu `contextmenu`: Wywoływane po kliknięciu prawym przyciskiem myszy lub długim naciśnięciu na ekranie dotykowym `manual`: Można otwierać i zamykać listę rozwijaną tylko programowo, nie można określić innych sposobów wyzwalania
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Pozycja treści listy rozwijanej. Dozwolone wartości: `auto`: Automatyczne określenie pozycji `top-start`: Nad elementem, wyrównany do lewej `top`: Nad elementem, wyśrodkowany `top-end`: Nad elementem, wyrównany do prawej `bottom-start`: Pod elementem, wyrównany do lewej `bottom`: Pod elementem, wyśrodkowany `bottom-end`: Pod elementem, wyrównany do prawej `left-start`: Po lewej stronie, wyrównany do góry `left`: Po lewej stronie, wyśrodkowany `left-end`: Po lewej stronie, wyrównany do dołu `right-start`: Po prawej stronie, wyrównany do góry `right`: Po prawej stronie, wyśrodkowany `right-end`: Po prawej stronie, wyrównany do dołu
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Określa, czy lista rozwijana pozostaje otwarta po kliknięciu `<mdui-menu-item>`.
`open-delay`	`openDelay`	`number`	`150`
Opóźnienie otwarcia listy rozwijanej po najechaniu myszą, w milisekundach
`close-delay`	`closeDelay`	`number`	`150`
Opóźnienie zamknięcia listy rozwijanej po najechaniu myszą, w milisekundach
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Określa, czy otworzyć listę rozwijaną w miejscu kursora, często używane do otwierania menu kontekstowego po kliknięciu prawym przyciskiem myszy.

Zdarzenia

Nazwa
`open`
Wywoływane przed otwarciem listy rozwijanej. Można zapobiec otwarciu, wywołując `event.preventDefault()`
`opened`
Wywoływane po zakończeniu animacji otwierania listy rozwijanej
`close`
Wywoływane przed zamknięciem listy rozwijanej. Można zapobiec zamknięciu, wywołując `event.preventDefault()`
`closed`
Wywoływane po zakończeniu animacji zamykania listy rozwijanej

Slots

Nazwa
(domyślny)
Treść listy rozwijanej
`trigger`
Element wyzwalający listę rozwijaną, np. element `<mdui-button>`

CSS Parts

Nazwa
`trigger`
Kontener elementu wyzwalającego listę rozwijaną, tj. kontener slotu `trigger`
`panel`
Kontener treści listy rozwijanej

Właściwości niestandardowe CSS

Nazwa
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

Divider Separator

Następny rozdział

Fab Pływający przycisk akcji

DropdownLista rozwijana

Sposób użycia

Przykłady

Stan wyłączony

Pozycja otwarcia

Sposób wyzwalania

Otwieranie w miejscu kursora

Pozostawianie menu otwartego

Opóźnienie otwierania/zamykania

API

Właściwości

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS