Modal Multi Step

Displays a modal that appears when clicking on an element. This component extends the modal component and adds a multi step feature. Which means that you can use any prop that the modal component accepts.

Install

Run the following command to install the modal component:

npx acc-nuxt add ModalMultiStep

Notes

This component extends the modal component and adds a multi step feature.

Multi step

Disable next

Controlled step

Custom styles

Header slot

Content slot

Slots

The multi-step modal component provides the following slots for customization.

#trigger
The element that triggers the modal on click. This is typically a button. Optional if using v-model:open.
#header
The header content displayed above the main modal content.
#content
The content displayed on all tabs/steps. This content will be shown on every step unless overridden by specific tab slots.
#tab-{n}
Dynamic slots for each step content, where {n} is the step number (1-indexed). For example: #tab-1, #tab-2, #tab-3.
#footer="{ close, confirm, submitting, disableConfirm }"
Slot for customizing the modal footer. Receives close and confirm functions, along with submitting and disableConfirm states.

Props

totalSteps:number
default:1
Total number of steps.
disableNext:boolean— optional
default:false
Disables the next button.
confirmText:string— optional
default:Confirm
Text for the confirm button.
closeText:string— optional
default:Close
Text for the close button.

CSS Variables

The multi-step modal component can be customized using the following CSS variables.

--lev-modal-overlay-bg
default:rgba(0, 0, 0, 0.7)
Background color of the modal overlay.
--lev-modal-wrapper-align-items
default:center
Vertical alignment of the modal content.
--lev-modal-wrapper-padding
default:24px
Padding around the modal content.
--lev-modal-wrapper-z-index
default:1001
Z-index of the modal to control stacking order.
--lev-modal-content-padding
default:24px
Padding inside the modal content area.
--lev-modal-content-bg
default:#fff
Background color of the modal content.
--lev-modal-content-max-width
default:500px
Maximum width of the modal content.
--lev-modal-content-gap
default:16px
Gap between modal content sections.
--lev-modal-content-radius
default:8px
Border radius of the modal content.
--lev-modal-content-shadow
default:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
Box shadow of the modal content.
--lev-modal-content-bg-dark
default:#18181b
Background color of the modal content in dark theme.
--lev-modal-content-shadow-dark
default:0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5)
Box shadow of the modal content in dark theme.

On This Page