ToggleFilterButton.vue 556 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <Button variant="outlined">
  3. <Icon
  4. name="ph:funnel-simple-bold"
  5. size="1.25rem"
  6. />
  7. <div class="flex flex-col">
  8. <div
  9. class="overflow-hidden"
  10. :class="showFilters && 'h-0!'"
  11. >
  12. Show
  13. </div>
  14. <div
  15. class="overflow-hidden"
  16. :class="!showFilters && 'h-0!'"
  17. >
  18. Hide
  19. </div>
  20. </div>
  21. </Button>
  22. </template>
  23. <script setup>
  24. const props = defineProps({
  25. showFilters: {
  26. type: Boolean,
  27. required: true
  28. }
  29. })
  30. </script>
  31. <style scoped></style>