feat(QBtnDropdown): Support transition props (#14585)

feat(QBtnDropdown): transition props
quasarframework · Oct 12, 2022 · f90da4b · f90da4b
1 parent 0bae1cc
commit f90da4b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/ui/dev/src/pages/components/button-dropdown.vue b/ui/dev/src/pages/components/button-dropdown.vue
@@ -239,6 +239,43 @@
       </q-list>
     </q-btn-dropdown>
 
+    <q-btn-dropdown transition-show="jump-down" transition-hide="jump-up" transition-duration="1000" color="primary" split glossy label="transition" @click="log('click')" style="margin: 15px">
+      <q-list>
+        <q-item clickable v-for="n in 2" :key="`2.${n}`" v-close-popup @click="showNotification">
+          <q-item-section avatar>
+            <q-avatar icon="folder" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Photos</q-item-label>
+            <q-item-label caption>
+              February 22, 2016
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+        <q-separator inset="item" spaced />
+        <q-item-label header inset>
+          Files
+        </q-item-label>
+        <q-item clickable v-close-popup @click="showNotification">
+          <q-item-section avatar>
+            <q-avatar icon="assignment" color="secondary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vacation</q-item-label>
+            <q-item-label caption>
+              February 22, 2016
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+
     <q-btn-dropdown :disable-main-btn="disableMainBtn" :disable-dropdown="disableDropdown" color="primary" split glossy label="btn" @click="log('click')" style="margin: 15px">
       <q-list>
         <q-item clickable v-for="n in 2" :key="`2.${n}`" v-close-popup @click="showNotification">

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js
@@ -6,6 +6,7 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { useBtnProps } from '../btn/use-btn.js'
+import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
@@ -17,6 +18,7 @@ export default createComponent({
 
   props: {
     ...useBtnProps,
+    ...useTransitionProps,
 
     modelValue: Boolean,
     split: Boolean,
@@ -165,6 +167,9 @@ export default createComponent({
           self: props.menuSelf,
           offset: props.menuOffset,
           separateClosePopup: true,
+          transitionShow: props.transitionShow,
+          transitionHide: props.transitionHide,
+          transitionDuration: props.transitionDuration,
           onBeforeShow,
           onShow,
           onBeforeHide,

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.json b/ui/src/components/btn-dropdown/QBtnDropdown.json
@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle" ],
+  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle", "composables/private/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown"