Dialog API
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| headline | This is the title of the dialog window | string | - | |
| no-keys | Disables the ESC key to prevent closing with it | boolean | false | |
| no-close | Disables every interaction related to close | boolean | false | |
| local | If set to true, dialog will opens locally in it's parent container. See example above | boolean | false | |
| width | Width of the dialog in any CSS metric. This attribute doesn't change the size of an already opened dialog, so if you are also using the opened="true" attribute, make sure to set the width before it. |
string | - | |
| height | Height of the dialog in any CSS metric | string | - | |
| preventClose | When true, dialog cannot be closed | boolean | false | |
| opened | Handles opened state | boolean | false | |
| no-padding | Removes padding from content | boolean | false | |
| footer-close | A close button automatically appears in the footer | boolean | false |
Method
| Name | Description |
|---|---|
open([object]) |
The object can be any of the properties, and also there is an opener option. opener determines the element where the focus was before the dialog has opened. |
close() |
Close the dialog, if the dialog is open close it |
setContent([html]/[domNode]) |
Changes the content of dialog with the given parameter in opened state. It restores original content on close. |
setHeader([html]/[domNode]) |
Appends a secondary header to the dialog with the given parameter in opened state. It restores original headers on close. |
setSize([object]) |
Sets the dimensions of the dialog to the given { width, height } values. They must be valid CSS values e.g. '600px'. Be aware that the height means the height of the header + content + footer, not just the content. |
Events
| Event | Description | Returns |
|---|---|---|
dialog.open |
Fires on open | { detail: { component: [as object] } } |
dialog.close |
Fires on close | { detail: { component: [as object] } } |
dialog.beforeClose |
Fires on before close | { detail: { component: [as object] } } |
Floatingpage API Reference
Method
| Name | Description |
|---|---|
window.e.utils.openFloatingPage({url: url}) |
Opens the floatingpage with iframe. The iframe url come from parameter. |
window.e.utils.closeFloatingPage() |
Close all floatingpage on the page. You can call in or outside from iframe. |
e-dialog-action
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| key | An identifier for tracking events. It should be unique. In Vue.js key is a reserved attribute. Use :key.prop="'somekey'" to set this attribute. |
string | ||
| disabled | Disabled state. Does not fire trigger event if true. | boolean | false | |
| disabled-tooltip | Defines tooltip for disabled actions. | string |
Events
| Event | Description | Returns |
|---|---|---|
| trigger | Fires on clicking the action. |
e-dialog-back-button
Events
| Event | Description | Returns |
|---|---|---|
| click | Fires on clicking the button. |
e-dialog-cover
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| src | Set the url source of the image. | string | true | |
| height | Set the height of the whole header. | string | false | |
| tone | Set the header color according to the image brightness. | ['dark', 'light'] |
false | 'light' |