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.
Press the following button and take a look what can <msc-dialogs />
do ?
Basic Usage
<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
Structure
Put <msc-dialogs />
into HTML document.
JavaScript Instantiation
<msc-dialogs />
could also use JavaScript to create DOM element. Here comes some examples.
Style Customization
<msc-dialogs />
uses CSS custom properties to hook control panel's theme. That means developer could easy change it into the looks you like.
Otherwise delevelopers could also add attribute - data-hide-close-button
to hide <msc-dialogs />'s close button.
Property
Property Name | Type | Description |
---|---|---|
open
|
Boolean | Getter <msc-dialogs /> 's open state. |
Events
Event Signature | Description |
---|---|
msc-dialogs-close
|
Fired when <msc-dialogs /> closed. |
msc-dialogs-beforetoggle
|
Fired before <msc-dialogs /> is shown or hidden. Developers could gather state information through event.detail . |
msc-dialogs-toggle
|
Fired when <msc-dialogs /> is shown or hidden. Developers could gather state information through event.detail . |
Mathods
Mathod Signature | Description |
---|---|
showModal()
|
Show <msc-dialogs /> . |
close()
|
Close <msc-dialogs /> . |
Reference
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.