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

ComponentDescription
v-windowPrimary Component
v-window-itemSub-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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub