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
And one optional attribute:
- assetBaseURL - location to the icons which this element needs. If omitted, "./assets" is assumed. User of this element has to make sure the assets exist in the specified location (please see also webpack.config.js below).
Usage with WebPack
package.json
"dependencies": {
"@ecl/preset-eu": "4.1.1",
"@ewc-lib/ewc-dialog": "^0.1.0"
},
webpack.config.js
const CopyPlugin = require("copy-webpack-plugin")
...
plugins: [
new CopyPlugin({
patterns: [
{ from: "./node_modules/@ecl/resources-eu-icons/dist/svg/all/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 "@ecl/preset-eu/dist/styles/ecl-eu.css"
import "@ewc-lib/ewc-dialog"
import * as Styling from "@ewc-lib/ewc-dialog/src/externalStyling.mjs"
Styling.applyEclClasses()
Note that alternative external styling is supported - see also externalStyling.mjs.