<dy-popover>
Example
initialization...
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>当前时间</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 |