useDropdown

useDropdown allows you to position an element relative to another element. It is a wrapper for usePopover that sets default styles for Dropdown menus and adds additional close functionality like closing the menu when the someone clicks outside of the dropdown or when someone presses Esc.

Usage

For a minimal example, we can implement a floating element using two properties returned by the useDropdown hook.

1. refs - An object that contains a setReference and setFloating function. These functions should be bound to the element that the floating element will be positioned relative to and the floating element itself, respectively.
2. style - An object containing the position styles for your floating element.

By binding these properties to the appropriate elements, we can create a dropdown menu that opens when a button is clicked.

<script lang="ts" setup>
import { ref } from 'vue';
import { useDropdown, SfButton } from '@storefront-ui/vue';

const isOpen = ref(false);

const { referenceRef, floatingRef, style } = useDropdown({ isOpen, onClose: () => isOpen.value = false });
</script>

<template>
  <div ref="referenceRef" class="w-max">
    <SfButton @click="isOpen = !isOpen">Toggle</SfButton>
    <ul v-if="isOpen" ref="floatingRef" :style="style" class="absolute p-2 w-max rounded bg-gray-100">
      <li>More</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </div>
</template>