Popup
A lightweight anchored popover — placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.
Placements
Placement: top
Placement: bottom
Placement: left
Placement: right
html
| 1 | <nana-popup placement="bottom-start" arrow> |
| 2 | <nana-button slot="anchor">Menu</nana-button> |
| 3 | <div>Floating content</div> |
| 4 | </nana-popup> |
Hover trigger
Shown on hover / focus.
Import
ts
| 1 | import "@nana-tec/ui-components/popup"; |
Props
| Attribute | Type | Default |
|---|---|---|
placement | top | bottom | left | right (+ -start / -end) | bottom |
trigger | click | hover | manual | click |
open | boolean | false |
arrow | boolean | false |