1.1.1 • Published 4 years ago
afix-dialog v1.1.1
Dialog
A Web Component for presenting a modal dialog
Using it
Try it out directly (requires a modern browser)
import "https://cdn.skypack.dev/afix-dialog@latest";Or install with
npm install afix-dialogAnd use like this
import "afix-dialog"`Attributes
| Name | Description | Default |
|---|---|---|
| open | Whether or not the dialog is visible | Unset |
| for | The ID of a button to be opened by | Unset |
Slots
| Name | Description | Default |
|---|---|---|
| content | The contents of the dialog | Unset |
DialogElement
Methods
show(): void
Shows the dialog
close(): void
Hides the dialog
Events
close
Emitted when the dialog is closed
open
Emitted when the dialog is opened
CSS Custom Properties
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) |