MoreOptions.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <Menu as="div" class="relative inline-block text-left">
  3. <div>
  4. <MenuButton class="flex items-center text-grey-400 hover:text-grey-600 focus:outline-none">
  5. <span class="sr-only">Open options</span>
  6. <icon
  7. name="more"
  8. class="block w-6 h-6 text-grey-300 fill-current cursor-pointer outline-none"
  9. aria-hidden="true"
  10. />
  11. </MenuButton>
  12. </div>
  13. <transition
  14. enter-active-class="transition ease-out duration-100"
  15. enter-from-class="transform opacity-0 scale-95"
  16. enter-to-class="transform opacity-100 scale-100"
  17. leave-active-class="transition ease-in duration-75"
  18. leave-from-class="transform opacity-100 scale-100"
  19. leave-to-class="transform opacity-0 scale-95"
  20. >
  21. <MenuItems
  22. class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
  23. >
  24. <div class="py-1">
  25. <slot></slot>
  26. </div>
  27. </MenuItems>
  28. </transition>
  29. </Menu>
  30. </template>
  31. <script setup>
  32. import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
  33. </script>