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.
Reverse
The reverse prop will reverse the transitions
Direction
You can change the transition to vertical using the direction prop
Customized arrows
Arrows can be customized by using prev and next slots.
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.