Swap

Swap transitions between the default slot (the falsy slot) and the swap slot (the truthy slot). It can be used with or without v-model and supports indeterminate, rotate, and flip states.

Basic Example

The default swap usage. Click to toggle between the two slots.

Code Example

Basic.vue

Components

Swap is a standalone component.

Swap

The Swap component transitions between the default slot and the swap slot. It can be used with or without v-model and supports indeterminate, rotate, and flip states.

Swap Props	Type	Description
modelValue	boolean \| null	Controls which side of the swap is visible. Use with `v-model`. `true`: Shows the `swap` slot (on state) `false`: Shows the default slot (off state) `null`: Shows the `indeterminate` slot (indeterminate state)
rotate	boolean	Enables the `rotate` animation during swap.
flip	boolean	Enables the `flip` animation during swap.

Swap Slots	Description
default	The content for the `off` state (`modelValue === false`)
swap	The content for the `on` state (`modelValue === true`)
indeterminate	The content for the `indeterminate` state (`modelValue === null`)

Examples

External Control

Demonstrates controlling the swap externally with v-model.

Code Example

ExternalControl.vue

Indeterminate

Shows the indeterminate state using the indeterminate prop and slot.

Code Example

Indeterminate.vue

Rotate

Enables the rotate animation during swap with the rotate prop.

Code Example

Rotate.vue

Flip

Enables the flip animation during swap with the flip prop.

Code Example

Flip.vue

Prev Modal

Next Theme Controller