Dialog
Visualization & Interaction
Show Modal Content
- Draggable
- Resizable
- Keyboard support
- Customizable
- Backdrop
Quickstart #
<script>
import { Dialog, Button } from "@steeze-ui/components"
let opened = false
</script>
<Button on:click={() => (opened = true)}>Open</Button>
<Dialog bind:opened>
My Content
</Dialog>API Reference #
| Property | Type | Default |
|---|---|---|
opened
|
Boolean
|
false
|
draggable
|
Boolean
|
false
|
resizable
|
Boolean
|
false
|
unclosable
|
Boolean
|
false
|
Styling #
| Name | Default |
|---|---|
--st-overlay-backdrop-bg-color
|
rgba(0, 0, 0, 0.3)
|
--st-dialog-bg-color
|
--st-overlay-bg-color
|
--st-dialog-border-color
|
--st-overlay-border-color
|
--st-dialog-border-radius
|
--st-overlay-border-radius
|
--st-dialog-box-shadow
|
--st-overlay-box-shadow
|
--st-dialog-padding
|
--st-overlay-padding
|
--st-dialog-draggable-height
|
16px
|