<template>
  <div class="flex justify-between gap-8">
    <div>
      <AisDropdown label="Drop-Right"
                   :items="items"
                   variant="secondary"
                   font="sans"
                   size="sm"
                   rounded
                   dropright
      ></AisDropdown>
    </div>

    <div>
      <AisDropdown label="Drop-Up"
                   :items="items"
                   variant="secondary"
                   font="sans"
                   size="sm"
                   rounded
                   dropup
      ></AisDropdown>
    </div>

    <div>
      <AisDropdown label="Drop-Up & Align Right"
                   :items="items"
                   variant="secondary"
                   font="sans"
                   size="sm"
                   rounded
                   dropup right
      ></AisDropdown>
    </div>

    <div>
      <AisDropdown label="Drop-Left"
                   :items="items"
                   variant="secondary"
                   font="sans"
                   size="sm"
                   rounded
                   dropleft
      ></AisDropdown>
    </div>
  </div>

</template>

<script setup>
  import AisDropdown from "@/components/dropdown/AisDropdown.vue";
  import { items } from "@/components/menu/examples/example-items.js"
</script>

<script>
export default {
  name: "AisDropdownPositioning",
}
</script>