<dy-drawer>
A drawer is a panel that slides in from the edge of the screen. It can contain various types of content and is commonly used for navigation menus, filters, or additional information panels.
Example
Loading...
<dy-drawerCurrent page auto open drawer, refresh
.header=${"Title"}
.open=${true}
@ok=${(evt) => evt.target.open = false}
@close=${(evt) => evt.target.open = false}
@maskclick=${(evt) => evt.target.open = false}> Drawer </dy-drawer>
API
DuoyunDrawerElement
Extends DuoyunModalElement
DuoyunDrawerElement Constructor DuoyunDrawerElement()
| Params | Type |
|---|---|
options |
ModalOptions |
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 |