Dropdown component

Basic usage 

import { WDropdown } from "vue-windi"

Headless dropdown

Trigger with div
<WDropdown placement="bottom-start">
    <template #trigger="{ active }">
      <WButton :active="active">Bottom-start</WButton>
    </template>
    test
  </WDropdown>
  <WDropdown placement="bottom-end">
    <template #trigger="{ active }">
      <WButton :active="active">Bottom-end</WButton>
    </template>
    test
  </WDropdown>
  <WDropdown placement="top-start">
    <template #trigger="{ active }">
      <WButton :active="active">Top-start</WButton>
    </template>
    test
  </WDropdown>
  <WDropdown placement="top-end">
    <template #trigger="{ active }">
      <WButton :active="active">Top-end</WButton>
    </template>
    test
  </WDropdown>
  <WDropdown placement="bottom-start">
    <template #trigger="{ active }">
      <div>Trigger with div</div>
    </template>
    test
  </WDropdown>

With menu

Make sure that you have imported WMenu and WButton to you vue file


<WDropdown>
  <template #trigger="{ active }">
    <WButton :active="active">With Menu</WButton>
  </template>
  <WMenu rounded padding>
    <WButton menu-item>Item 1</WButton>
    <WButton menu-item>Item 2</WButton>
    <WButton menu-item>Item 3</WButton>
  </WMenu>
</WDropdown>

Hover 

<WDropdown hover>
  <template #trigger="{ active }">
    <WButton :active="active">Hover</WButton>
  </template>
  <WMenu rounded padding>
    <WButton menu-item>Item 1</WButton>
    <WButton menu-item>Item 2</WButton>
    <WButton menu-item>Item 3</WButton>
  </WMenu>
</WDropdown>