vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

feat(VWindow): set class when window is transitioning

Open fahmifitu opened this issue 1 year ago • 0 comments

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>

fahmifitu avatar May 10 '23 15:05 fahmifitu