Screenshot
API
There are the following setters:
- visible - true to show modally, false to hide
- width - width of the dialog, preferrably in %. Default = 50%
- title - HTMLTemplateElement containing HTML which is displayed as dialog title
- scrollableContent - HTMLTemplateElement containing HTML which is displayed in dialog's area for scrollable content
- fixedContent - HTMLTemplateElement containing HTML which is displayed in dialog's area for fixed content
And one optional attribute:
- width - is reflected to property w/ same name.
All attribs and props support modification at runtime.
Note: Please see the screenshot above to see where scrollable-content and fixed-content are displayed within the dialog box.
Setting the content
Content can be set in either of two ways:
- via HTML
- at runtime from JS using a setter
There are the following "slots" to set the respective content:
- title
- scrollableContent
- fixedContent
Please see the usage-example/ directory, which contains working examples of setting the 3 different content slots in both ways, via HTML or JS.
Note: The term "slot" used here refers to an alternative implementation of the standard shadow-DOM slot mechanism.
Note: fixedContent can be omitted - the space is taken up by scrollableContent in that case.
Example: set content via HTML
This is done by setting one of the three attributes on a HTMLTemplateElement (which is a child of ewc-dialog) to indicate the content:
- data-title
- data-scrollable-content
- data-fixed-content
Example:
<ewc-dialog>
<template data-title><span>Title appears here</span></template>
<template data-scrollable-content>
<span>This is the where scrollable content appears - e.g. a longer text w/ explaining something.</span>
</template>
<template data-fixed-content>
<span>This is the where fixed content appears. For example, a checkbox or buttons.</span>
</template>
</ewc-dialog>
Example: set content via setter
const scrollableContent = document.createElement('template');
scrollableContent.innerHTML = ...
myDialog.scrollableContent = scrollableContent
// similar for title and fixed content
Tab-focus trap
This component supports a focus trap, with which the tab focus remains within the dialog box, meaning that it cycles through all tab-able elements and doesn't ever leave the dialog box.
If scrollableContent or fixedContent contains elements which should be included in the focus trap - for example links - there's the possibility to set the focus trap's last element (to the last focusable element in either scrollableContent or fixedContent) - after which the first element (the close button) is focussed again, thereby completing a cycle.
This is done by setting the attribute data-last-element approprietly.
Example:
...
const scrollableContent = document.createElement('template');
...
scrollableContent.innerHTML = `<a data-last-element href="https://ec.europa.eu/eurostat" title="Link to Estat">Some Link Text</a>`
...
This way, the focus remains trapped within the dialog - but also includes all tab-focusable elements within scrollableContent and/or fixedContent.
Note: The usage-example/ directory contains a working example of this.
