Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-10 15:35:34 +00:00
Code Issues Projects Releases Wiki Activity

Add enter/leave transition to dropdowns

Browse Source
This commit is contained in:
khatabwedaa
2021-02-07 18:45:04 +02:00
parent 4451ddd36d
commit 455ad20203
3 changed files with 77 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ui/Buttons/WithMenu.vue
View File

@@ -13,11 +13,20 @@
</svg> </svg>
</button> </button>
<transition
enter-active-class="transition duration-150 ease-out transform"
enter-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform"
leave-class="scale-100 opacity-100"
leave-to-class="scale-95 opacity-0"
>
<div v-show="menuOpen" class="absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700"> <div v-show="menuOpen" class="absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700">
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
</div> </div>
</transition>
</div> </div>
</div> </div>
</div> </div>

9
src/components/ui/Dropdowns/Notification.vue
View File

@@ -10,6 +10,14 @@
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<transition
enter-active-class="transition duration-150 ease-out transform"
enter-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform"
leave-class="scale-100 opacity-100"
leave-to-class="scale-95 opacity-0"
>
<div v-show="dropdownOpen" class="absolute right-0 z-20 mt-2 overflow-hidden bg-white rounded-md shadow-lg w-80 dark:bg-gray-800"> <div v-show="dropdownOpen" class="absolute right-0 z-20 mt-2 overflow-hidden bg-white rounded-md shadow-lg w-80 dark:bg-gray-800">
<div class="py-2"> <div class="py-2">
<a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700"> <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
@@ -39,6 +47,7 @@
</div> </div>
<a href="#" class="block py-2 font-bold text-center text-white bg-gray-800 dark:bg-gray-700 hover:underline">See all notifications</a> <a href="#" class="block py-2 font-bold text-center text-white bg-gray-800 dark:bg-gray-700 hover:underline">See all notifications</a>
</div> </div>
</transition>
</div> </div>
</div> </div>
</view-component> </view-component>

9
src/components/ui/Dropdowns/Simple.vue
View File

@@ -10,6 +10,14 @@
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<transition
enter-active-class="transition duration-150 ease-out transform"
enter-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform"
leave-class="scale-100 opacity-100"
leave-to-class="scale-95 opacity-0"
>
<div v-show="dropdownOpen" class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800"> <div v-show="dropdownOpen" class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
your profile your profile
@@ -27,6 +35,7 @@
Sign Out Sign Out
</a> </a>
</div> </div>
</transition>
</div> </div>
</div> </div>
</view-component> </view-component>