<dy-modal>
A modal dialog component that creates an overlay to focus user attention on specific content or actions. It supports customizable headers, content, and actions, with built-in support for closing via mask click or buttons.
Example
Loading...
<dy-modalCurrent page auto open modal, refresh
.header=${"Title"}
.open=${true}
@ok=${(evt) => evt.target.open = false}
@close=${(evt) => evt.target.open = false}
@maskclick=${(evt) => evt.target.open = false}> Modal </dy-modal>
API
DuoyunModalElement
Extends TapDialogElement
TapDialogElement
Shadow DOM; Extends GemElement
TapDialogElement Constructor TapDialogElement()
| Params | Type |
|---|---|
options |
DialogOptions |
TapDialogElement Static Methods
| Method | Type |
|---|---|
open |
<T = Element>(options: DialogOptions & DialogOpenOptions<T>) => DyPromise<T, { modal: TapDialogElement; }> & { modal: TapDialogElement; } |
confirm |
(body: string | TemplateResult | Record<string, unknown>, options?: DialogOptions) => DyPromise<Element, { modal: TapDialogElement; }> & { modal: TapDialogElement; } |
TapDialogElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
open(open) |
Yes | boolean |
customize(customize) |
Yes | boolean |
maskClosable(mask-closable) |
Yes | boolean |
okText(ok-text) |
Yes | string |
cancelText(cancel-text) |
Yes | string |
disableDefaultCancelBtn(disable-default-cancel-btn) |
Yes | boolean |
disableDefaultOKBtn(disable-default-okbtn) |
Yes | boolean |
dangerDefaultOkBtn(danger-default-ok-btn) |
Yes | boolean |
header(header) |
Yes | string |
body(body) |
Yes | string |
close |
Emitter |
|
ok |
Emitter |
|
maskclick |
Emitter |
|
openAnimation |
Yes | PropertyIndexedKeyframes | Keyframe[] |
closeAnimation |
Yes | PropertyIndexedKeyframes | Keyframe[] |
headerSlot |
Yes | string | TemplateResult |
bodySlot |
Yes | string | TemplateResult |
footerSlot |
Yes | string | TemplateResult |
TapDialogElement Other
| Type | Value |
|---|---|
| Event | close, ok, maskclick |
| Slot | header, unnamed, footer |
| Part | dialog, divider, body |
| CSS State | closing |