feat(transitions): add dialog-top-transition (#12751)

vuetifyjs · Dec 23, 2020 · 09ddab5 · 09ddab5
1 parent d0f25fc
commit 09ddab5
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 0 deletions.
diff --git a/packages/docs/src/examples/v-dialog/prop-transitions.vue b/packages/docs/src/examples/v-dialog/prop-transitions.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-row justify="space-around">
+    <v-col cols="auto">
+      <v-dialog
+        transition="dialog-bottom-transition"
+        max-width="600"
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            color="primary"
+            v-bind="attrs"
+            v-on="on"
+          >From the bottom</v-btn>
+        </template>
+        <template v-slot:default="dialog">
+          <v-card>
+            <v-toolbar
+              color="primary"
+              dark
+            >Opening from the bottom</v-toolbar>
+            <v-card-text>
+              <div class="text-h2 pa-12">Hello world!</div>
+            </v-card-text>
+            <v-card-actions class="justify-end">
+              <v-btn
+                text
+                @click="dialog.value = false"
+              >Close</v-btn>
+            </v-card-actions>
+          </v-card>
+        </template>
+      </v-dialog>
+    </v-col>
+
+    <v-col cols="auto">
+      <v-dialog
+        transition="dialog-top-transition"
+        max-width="600"
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            color="primary"
+            v-bind="attrs"
+            v-on="on"
+          >From the top</v-btn>
+        </template>
+        <template v-slot:default="dialog">
+          <v-card>
+            <v-toolbar
+              color="primary"
+              dark
+            >Opening from the top</v-toolbar>
+            <v-card-text>
+              <div class="text-h2 pa-12">Hello world!</div>
+            </v-card-text>
+            <v-card-actions class="justify-end">
+              <v-btn
+                text
+                @click="dialog.value = false"
+              >Close</v-btn>
+            </v-card-actions>
+          </v-card>
+        </template>
+      </v-dialog>
+    </v-col>
+  </v-row>
+</template>
diff --git a/packages/docs/src/pages/en/components/dialogs.md b/packages/docs/src/pages/en/components/dialogs.md
@@ -35,6 +35,12 @@ Due to limited space, full-screen dialogs may be more appropriate for mobile dev
 
 <example file="v-dialog/prop-fullscreen" />
 
+#### Transitions
+
+You can make the dialog appear from the top or the bottom.
+
+<example file="v-dialog/prop-transitions" />
+
 #### Modal
 
 Similar to a Simple Dialog, except that it's not dismissed when touching outside.

diff --git a/packages/vuetify/src/components/transitions/index.ts b/packages/vuetify/src/components/transitions/index.ts
@@ -16,6 +16,7 @@ export const VFabTransition = createSimpleTransition('fab-transition', 'center c
 // Generic transitions
 export const VDialogTransition = createSimpleTransition('dialog-transition')
 export const VDialogBottomTransition = createSimpleTransition('dialog-bottom-transition')
+export const VDialogTopTransition = createSimpleTransition('dialog-top-transition')
 export const VFadeTransition = createSimpleTransition('fade-transition')
 export const VScaleTransition = createSimpleTransition('scale-transition')
 export const VScrollXTransition = createSimpleTransition('scroll-x-transition')
@@ -37,6 +38,7 @@ export default {
     VCarouselReverseTransition,
     VDialogTransition,
     VDialogBottomTransition,
+    VDialogTopTransition,
     VFabTransition,
     VFadeTransition,
     VMenuTransition,

diff --git a/packages/vuetify/src/styles/generic/_transitions.scss b/packages/vuetify/src/styles/generic/_transitions.scss
@@ -52,6 +52,12 @@
     }
   }
 
+  .dialog-top-transition {
+    &-enter, &-leave-to {
+      transform: translateY(-100%);
+    }
+  }
+
   .picker-transition,
   .picker-reverse-transition {
     &-enter-active,

diff --git a/packages/vuetify/types/lib.d.ts b/packages/vuetify/types/lib.d.ts
@@ -162,6 +162,7 @@ declare module 'vuetify/lib' {
   const VFabTransition: VueConstructor
   const VDialogTransition: VueConstructor
   const VDialogBottomTransition: VueConstructor
+  const VDialogTopTransition: VueConstructor
   const VFadeTransition: VueConstructor
   const VScaleTransition: VueConstructor
   const VScrollXTransition: VueConstructor
@@ -332,6 +333,7 @@ declare module 'vuetify/lib' {
     VFabTransition,
     VDialogTransition,
     VDialogBottomTransition,
+    VDialogTopTransition,
     VFadeTransition,
     VScaleTransition,
     VScrollXTransition,