Screenshot

API
There are the following setters:
- visible - true to show modally, false to hide
- title - sets the header text
- bodyHtml - sets the body html
- width - width of the dialog, preferrably in %. Default = 50%
And one optional attribute:
- width - is reflected to property w/ same name.
All attribs and props support modification at runtime.
Usage with WebPack
package.json
"dependencies": {
"@ewc-lib/ewc-dialog": "^0.1.0"
},
webpack.config.js
const CopyPlugin = require("copy-webpack-plugin")
...
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "./node_modules/@ewc-lib/ewc-banner/assets/close-filled.svg", to: "./assets" }
],
}),
],
index.html
<body>
<script src="bundle.js"></script>
<ewc-dialog></ewc-dialog>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const el = document.getElementsByTagName("ewc-dialog")[0]
el.title = "Information"
el.bodyHtml = "<ul> <li>This</li> <li>That</li> </ul> And some more."
el.visible = true
})
</script>
</body>
main.js
import "@ewc-lib/ewc-css/ewc.css"
import "@ewc-lib/ewc-dialog"