Appearance
Modal
The Modal
component provides a very basic dialogue window useful for prompting the user to take some action.
Composable Components
The Modal is made up of several components that allow you to compose different types of modal windows.
Component | Description |
---|---|
ModalRoot | The root component element |
ModalContent | The wrapper element that contains all the content of the modal |
ModalHeader | The element that contains the modal header content |
ModalBody | The element that contains the modal body content |
ModalFooter | The element that contains the modal footer content |
ModalClose | The trigger button element that closes the modal |
ModalAction | The trigger button that can be used to handle a post modal closing event. Typically a submit type routine |
ModalOverlay | The browser overlay. Use this is you need to prevent the user from interacting with the ui while the modal is open |
Examples
js
const isOpen = ref(false) // toggle this value to make the modal open/close
html
<teleport to="body">
<ModalRoot v-model="isOpen" @modal-root:close="handleClose" class="top-0 left-0">
<ModalContent>
<ModalHeader class="header">
<h2>Modal Title</h2>
</ModalHeader>
<ModalBody class="!p-8">
<p>
Modal body text goes here.
</p>
</ModalBody>
<ModalFooter>
<ModalClose @modal-close:click="handleClose" class="btn-secondary">Cancel</ModalClose>
<ModalAction class="!ms-3 btn-primary" @modal-action:click="handleAction">Done</ModalAction>
</ModalFooter>
</ModalContent>
<ModalOverlay />
</ModalRoot>
</teleport>
A working example of this can be in /frontend/components/PasswordModal/PasswordModal.vue
.
ModalRoot
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
modal-root:close | emits when the modal is closed |
CSS Classes
Class | Description |
---|---|
.modal-root | the class applied to the ModalRoot element |
ModalContent
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.modal-content | the class applied to the ModalContent element |
ModalHeader
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.modal-header | the class applied to the ModalHeader element |
ModalBody
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.modal-body | the class applied to the ModalBody element |
ModalFooter
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.modal-footer | the class applied to the ModalFooter element |
ModalClose
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
modal-close:click | emits when the modal close button element is clicked |
CSS Classes
Class | Description |
---|---|
.modal-close | the class applied to the ModalClose element |
ModalAction
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
modal-action:click | emits when the modal action button element is clicked |
CSS Classes
Class | Description |
---|---|
.modal-action | the class applied to the ModalAction element |