Windows

The v-window component is the baseline functionality for transitioning content from 1 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 truly custom implementations.

API

v-window
Name
active-class
Default
'v-item--active'
Type
string

Components.Windows.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
mandatory
Default
true
Type
boolean

Components.Windows.

Name
max
Default
undefined
Type
number | string

Components.Windows.

Name
multiple
Default
false
Type
boolean

Components.Windows.

Name
reverse
Default
false
Type
boolean

Components.Windows.

Name
touch
Default
undefined
Type
object

Components.Windows.

{
  left: Function",
  right: Function"
}
Name
touchless
Default
false
Type
boolean

Components.Windows.

Name
value
Default
undefined
Type
any

Components.Windows.

Name
vertical
Default
false
Type
boolean

Components.Windows.

Examples

Onboarding

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

Account creation

Create rich forms with smooth animations. v-window automatically tracks the current selection index to automatically change the transition direction. This can be manually controlled with the reverse prop.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore