Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
1.1 KiB
1.1 KiB
dropdown
Dropdown can open a menu or any other element when the button is clicked
Class names
- component:
dropdown - part:
dropdown-content - placement:
dropdown-start,dropdown-center,dropdown-end,dropdown-top,dropdown-bottom,dropdown-left,dropdown-right - modifier:
dropdown-hover,dropdown-open,dropdown-close
Syntax
Using popover API
<button popovertarget="{id}" style="anchor-name:--{anchor}">{button}</button>
<ul class="dropdown" popover id="{id}" style="position-anchor:--{anchor}">
{CONTENT}
</ul>
Using details and summary (only opens/closes on click)
<details class="dropdown">
<summary>Button</summary>
<ul class="dropdown-content">
{CONTENT}
</ul>
</details>
Rules
- {MODIFIER} is optional and can have one of the modifier/placement class names
- replace
{id}and{anchor}with a unique name - The content can be any HTML element (not just
<ul>) - For popover API method, we don't use
dropdown-content. Only button and adropdown