Dropdown
The dropdown component is a container for a dropdown-trigger and a dropdown-overlay.
- dropdown-trigger is the container for a button.
- dropdown-overlay the togglable container for a menu, hidden by default, with a white background and a shadow.
<qtm-dropdown>
<qtm-dropdown-trigger>
<qtm-button>Dropdown button</qtm-button>
</qtm-dropdown-trigger>
<qtm-dropdown-overlay>
<qtm-menu-item-list>
<qtm-menu-item>
<qtm-menu-item-label> Menu Item 1 </qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item>
<qtm-menu-item-label> Menu Item 2 </qtm-menu-item-label>
</qtm-menu-item>
<qtm-menu-item>
<qtm-menu-item-label> Menu Item 3 </qtm-menu-item-label>
</qtm-menu-item>
</qtm-menu-item-list>
</qtm-dropdown-overlay>
</qtm-dropdown>
Dropdown overlay
You are able to implement inside a qtm-dropdown-overlay
a menu item list, a paragraph or whatever.
You can insert any type of content within the dropdown overlay.
<qtm-dropdown visible>
<qtm-dropdown-trigger>
<qtm-button>Dropdown button</qtm-button>
</qtm-dropdown-trigger>
<qtm-dropdown-overlay>
<qtm-typography component="body-2" classes="p-m"
>You can insert any type of content within the dropdown
overlay.</qtm-typography
>
</qtm-dropdown-overlay>
</qtm-dropdown>
Visible
You can use visible
attribute to display dropdown-overlay.
<qtm-dropdown visible> ... </qtm-dropdown>
Placement
You can set top-center
, top-right
, top-left
, bottom-center
, bottom-right
and bottom-left
to placement
property to place the dropdown overlay. By default the placement is bottom-left
.
The dropdown is bottom left aligned.
<qtm-dropdown visible placement="bottom-left"> ... </qtm-dropdown>
The dropdown is center left aligned.
<qtm-dropdown visible placement="bottom-center"> ... </qtm-dropdown>
The dropdown is bottom right aligned.
<qtm-dropdown visible placement="bottom-right"> ... </qtm-dropdown>
The dropdown is top left aligned.
<qtm-dropdown visible placement="top-left"> ... </qtm-dropdown>
The dropdown is top center aligned.
<qtm-dropdown visible placement="top-center"> ... </qtm-dropdown>
The dropdown is top right aligned.
<qtm-dropdown visible placement="top-right"> ... </qtm-dropdown>
Customize style
Add your own classes in the classes
attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).
API
qtm-dropdown
Property | Type | Default | Description |
---|---|---|---|
classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
disabled | boolean | false | If true, the component is disabled. |
placement | "bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right" | Placement of dropdown overlay | |
visible | boolean | false | If true, the dropdown overlay is opened |
Event | Type | Description |
---|---|---|
clickOutside | CustomEvent<void> | Callback fired when the dropdown overlay is closed. |
visibleChange | CustomEvent<DropdownVisibleData> | Callback fired when the dropdown trigger is clicked. function(event: object) => void |
qtm-dropdown-trigger
Property | Type | Default | Description |
---|---|---|---|
classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
disabled | boolean | false | If true, the dropdown trigger is disabled does not emit a trigger event. |
Event | Type | Description |
---|---|---|
triggerEvent | CustomEvent<void> | Callback fired when the dropdown trigger is clicked. |
qtm-dropdown-overlay
Property | Type | Default | Description |
---|---|---|---|
classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing |