A Web Component for presenting a modal dialog
Try it out directly (requires a modern browser)
import "https://cdn.skypack.dev/afix-dialog@latest";
Or install with
npm install afix-dialog
And use like this
import "afix-dialog"`
Name | Description | Default |
---|---|---|
open | Whether or not the dialog is visible | Unset |
for | The ID of a button to be opened by | Unset |
Name | Description | Default |
---|---|---|
content | The contents of the dialog | Unset |
Shows the dialog
Hides the dialog
Emitted when the dialog is closed
Emitted when the dialog is opened
Remember all custom properties are prefixed with the component name. e.g. background-color
is --afix-dialog-background-color
.
Name | Description | Default |
---|---|---|
background-color | The background of the dialog | rgba(0, 0, 0, 0.75) |
transition-duration | The amount of time the in/out transition takes | 150ms |
transition-easing | The easing function used when showing the dialog | cubic-bezier(0.61, 1, 0.88, 1) |