CODEWITHSUNDEEP
javascriptvue.jsnuxt.jstailwind-cssheadless-ui
Shuvo
Shuvo

Reputation: 177

How to create a drawer using headlessui/vue and tailwindcss?

Actually I was trying to make a drawer component using headlessui/vue and tailwindcss.

I was exploring headless ui doc for vuejs and tried to find out if any drawer example there but not found. Then I have made my self to do it using headlessui/vue dialog component.

Upvotes: 0

Views: 474

Answers (1)

Shuvo
Shuvo

Reputation: 177

You can make simple drawer with transition effect using headlessui/vue dialog & transition components.

<template>
  <TransitionRoot appear :show="showDrawer" as="template">
    <Dialog
      as="div"
      @close="$emit('closeDrawer')"
      class="relative z-10 lg:hidden"
    >
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <!-- drawer backdrop -->
        <div class="fixed inset-0 bg-black/50 z-[100]" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto z-[101]">
        <div class="h-full w-full flex items-start gap-4 justify-end">
          <!-- transition for drawer slide animation from right -->
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
            enter-from="opacity-0 translate-x-full"
            enter-to="opacity-100 translate-x-0"
            leave="duration-200 ease-in"
            leave-from="opacity-100 translate-x-0"
            leave-to="opacity-0 translate-x-full"
          >
            <DialogPanel
              class="max-w-md transform overflow-hidden bg-white p-6 text-left align-middle shadow-xl transition-all h-full w-[300px] ml-auto relative"
            >
              <button
                type="button"
                @click="$emit('closeDrawer')"
                class="size-7 inline-flex items-center justify-center bg-gray-100 rounded transition-transform absolute top-2 left-2"
              >
                <icon-x height="24" width="24" />
              </button>
              <div>drawer content here</div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script setup>
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
} from '@headlessui/vue';

// emits
defineEmits(['closeDrawer']);

//props
defineProps({
  showDrawer: {
    type: Boolean,
  },
});
</script>

Upvotes: 1

Related Questions