vuetify
vuetify copied to clipboard
feat(VWindow): set class when window is transitioning
Description
This PR adds the css class 'v-window__container--is-active' when the window is in transitioning. this existed in vuetify 2 but didn't make to vuetify 3.
My use case: I have a window that contains elements with shadows, I needed to make the shadows overflow the container in normal state by setting overflow: visible
. but this breaks the ui when navigating the windows. and there's no class to apply styling to without this PR.
I'm sure there are more advanced use cases that would need style when the windos are transitioning
Markup:
Test this markup in before and after the PR to notice the difference
<template>
<v-app>
<v-container style="max-width: 500px">
<v-window show-arrows>
<v-window-item>
<v-row>
<v-col cols="12" xl="8">
<v-card class="mb-10 pa-10" elevation="10" />
<v-card elevation="10" class="mb-10 pa-10" />
</v-col>
<v-col cols="12" xl="4">
<v-card class="mb-10 pa-10" elevation="10" />
<v-card elevation="10" class="mb-10 pa-10" />
</v-col>
</v-row>
</v-window-item>
<v-window-item>
<v-row>
<v-col cols="12" xl="8">
<v-card class="mb-10 pa-10" elevation="10" />
<v-card elevation="10" class="mb-10 pa-10" />
</v-col>
<v-col cols="12" xl="4">
<v-card class="mb-10 pa-10" elevation="10" />
<v-card elevation="10" class="mb-10 pa-10" />
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-container>
</v-app>
</template>
<style>
.v-window {
overflow: visible;
}
</style>