Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
### dropdown
|
|
|
|
Dropdown can open a menu or any other element when the button is clicked
|
|
|
|
[dropdown docs](https://daisyui.com/components/dropdown/)
|
|
|
|
#### 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
|
|
|
|
```html
|
|
<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)
|
|
|
|
```html
|
|
<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 a `dropdown`
|