<msc-dialogs /> is a common dialog effect. It comes with high customize user interface and show / close animation. It also suitable for all resolution. All we need to do is just put content we like to display as its children and everything will be all set
npm install msc-dialogs 
<msc-dialogs /> is a common dialog effect. It comes with high customize user interface and show / close animation. It also suitable for all resolution. All we need to do is just put content we like to display as its children and everything will be all set.
<msc-dialogs /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-dialogs />'s html structure and everything will be all set.
- Required Script
``html`
type="module"
src="https://unpkg.com/msc-dialogs/mjs/wc-msc-dialogs.js">
- Structure
Put <msc-dialogs /> into HTML document.
` Dialogs title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.html`
<msc-dialogs /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
<msc-dialogs /> uses CSS custom properties to hook control panel's theme. That means developer could easy change it into the looks you like.
`html`
Otherwise delevelopers could also add attribute - data-hide-close-button to hide <msc-dialogs />'s close button.
`html`
...
. |
| msc-dialogs-toggle | Fired when <msc-dialogs /> is shown or hidden. Developers could gather state information through event.detail`. |