Skip to main content

Dropdown

shadow

Dropdown element slúži na zobrazenie kontextového menu po kliknutí na tlačidlo. Umožňuje používateľovi zvoliť jednu z preddefinovaných možností. Obsahuje element Button, ktorý funguje ako aktivátor a element Menu s obsahom v podobe jednotlivých položiek MenuItem..

Základné použitie

Zobrazenie na hover

Atribúty a Vlastnosti

placement

DescriptionSets the location of the drop-down menu. The options are "start", "end", "top", "bottom".
Attributeplacement
Typestring
Default"start"

offset

DescriptionSpecifies the distance of the context menu from the button.
Attributeoffset
Typenumber
Default0

trigger

DescriptionSpecifies how the dropdown is activated. The values can be "click" or "hover".
Attributetrigger
Typestring
Default"click"

tooltip

DescriptionText that appears as a tooltip when hovered over an element.
Attributetooltip
Typestring
Defaultundefined

collapsible

DescriptionIf true, the dropdown will automatically close when the menu item is clicked.
Attributecollapsible
Typeboolean
Defaultfalse

Eventy

NameDescription
wje-dropdown:openIt is emitted when the dropdown menu is opened.
wje-dropdown:closeIt is emitted when the dropdown menu is closed.

Metódy

BeforeShow

DescriptionMethod executed before the dropdown menu is displayed.
Signature() => Promise<any>

AfterShow

DescriptionMethod executed after the dropdown menu is displayed.
Signature() => Promise<void>

beforeClose

DescriptionMethod executed before closing the dropdown menu.
Signature() => Promise<void>

afterClose

DescriptionMethod executed after closing the dropdown menu.
Signature() => Promise<void>

CSS Shadow Parts

NameDescription
nativeRefers to the div element inside the dropdown

CSS Custom Vlastnosti

NameDescription
--wj-dropdown-backgroundDropdown menu background colour
--wj-dropdown-border-radiusRounding the edges of the dropdown menu
--wj-dropdown-border-widthDropdown menu border width
--wj-dropdown-border-colorDropdown menu border colour
--wj-dropdown-box-shadowShadow dropdown menu
--wj-dropdown-widthDropdown menu width
--wj-dropdown-min-widthMinimum dropdown menu width
--wj-dropdown-max-widthMaximum dropdown menu width

Sloty

NameDescription
triggerAn element that serves as a trigger for displaying the dropdown menu.
``The contents of the dropdown menu.