This is the documentation for , which is no longer actively maintained.View latest version
<dy-popover>
A popover component that displays floating content triggered by click or hover events, with customizable positioning.
Example
import { render } from '@mantou/gem';
render(
html`
<dy-popover
trigger="click"
.content=${html`
<div
style="width: 200px; height: 100px; display: flex; place-items: center; place-content: center;"
>
${new Date().toLocaleString()}
</div>
`}
>
<dy-button>Current Time</dy-button>
</dy-popover>
`,
document.getElementById('root'),
);
API
Shadow DOM; Extends GemElement
Constructor DuoyunPopoverElement()
| Params |
Type |
options |
PopoverOptions |
Static Properties
| Property |
Type |
ghostStyle |
GhostStyle |
Static Methods
| Method |
Type |
open |
{ (e: Element, option: PopoverOptions): CloseCallback; (x: number, y: number, option: PopoverOptions): CloseCallback; (xywh: number[], option: PopoverOptions): CloseCallback; } |
Instance Properties
| Property(Attribute) |
Reactive |
Type |
debug(debug) |
Yes |
boolean |
unreachable(unreachable) |
Yes |
boolean |
disabled(disabled) |
Yes |
boolean |
trigger(trigger) |
Yes |
'click' | 'hover' |
position(position) |
Yes |
Position | 'auto' |
content |
Yes |
string | TemplateResult |
ghostStyle |
Yes |
GhostStyle |
open |
|
Emitter<null> |
close |
|
Emitter<null> |
get popoverElement |
|
DuoyunPopoverGhostElement | undefined |
Other
| Type |
Value |
| Event |
open, close |
| Part |
slot |
