UxModal
components/ux/Modal.vue
HeadlessUI dialog modal with backdrop, animated transitions, configurable alignment, and full-screen mode.
components/ux/Modal.vue
Usage
<UxModal
:open = "false"
:fullScreen = "false"
:atTop = "false"
:atBottom = "false"
:closeBtn = "true"
bg = "bg-white"
>
Content here
</UxModal>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | Boolean | false | Whether modal is visible (v-model:open) |
| fullScreen | Boolean | false | Full-screen mode |
| atTop | Boolean | false | Align to top of viewport |
| atBottom | Boolean | false | Align to bottom of viewport |
| closeBtn | Boolean | true | Show close button |
| bg | String | 'bg-white' | Background class |
Events
| Event | Description |
|---|---|
| update:open | When modal open state changes |
Slots
| Slot | Description |
|---|---|
| default | Modal content |