TeamPlaygroundSupport

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.

Card 1
ads via vuetify

API

ComponentDescription
v-windowPrimary Component
v-window-itemSub-component used to display a single window item
Toggle Inline API

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.

Sign-up
1
This is the email you will use to login to your Vuetify account

Onboarding

v-window makes it easy to create custom components such as a differently styled stepper.

Card 1

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