Windows
The v-window
component provides the baseline functionality for transitioning content from one pane to another. Other components such as v-tabs
, v-carousel
and v-stepper
utilize this component at their core.
Usage
Designed to easily cycle through content, v-window
provides a simple interface to create custom implementations.
API
Component | Description |
---|---|
v-window | Primary Component |
v-window-item | Sub-component used to display a single window item |
Examples
Props
Show arrows
By default no arrows are displayed. You can change this by adding the show-arrows prop. If you set the prop value to "hover"
, they will only show when you mouse over the window.
Slide 1
Reverse
The reverse prop will reverse the transitions
Slide 1
Direction
You can change the transition to vertical using the direction prop
Slide 1
Customized arrows
Arrows can be customized by using prev and next slots.
Slide 1
Misc
Account creation
Create rich forms with smooth animations. v-window
automatically tracks the current selection index to change the transition direction.
Onboarding
v-window
makes it easy to create custom components such as a differently styled stepper.