<template>
  <div>
    <div style="margin: 40px">
      <dropdown-menu
        v-model="show"
        :right="right"
        :hover="hover"
        :interactive="interactive"
      >
        <button class="btn btn-primary dropdown-toggle">
          Click to open dropdown
        </button>
        <div slot="dropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </dropdown-menu>
    </div>
    <div style="margin: 40px">
      <dropdown-menu
        v-model="show2"
        :right="right"
        :hover="hover"
        :interactive="interactive"
      >
        <button class="btn btn-primary dropdown-toggle">
          Click to open dropdown
        </button>
        <div slot="dropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </dropdown-menu>
    </div>
  </div>
</template>

<script>
import DropdownMenu from "@/components/DropdownMenu/DropdownMenu";
export default {
  name: "DropdownMenuView",
  data() {
    return {
      show: false,
      show2: false,
      right: true,
      hover: false,
      interactive: true
    };
  },
  components: {
    DropdownMenu
  }
};
</script>

<style scoped></style>
