import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{F as o}from"./chunks/FwbDropdown.e54fafa7.js";import{o as e,c,H as s,w as n,l as a,k as t,a as l,Q as r}from"./chunks/framework.3f630664.js";import{_ as g,a as p}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const d={class:"vp-raw flex gap-2 flex-wrap"},u=t("p",{class:"p-2"}," Dropdown content here ",-1),m=t("p",{class:"p-2"}," Dropdown content here ",-1),w=t("p",{class:"p-2"}," Dropdown content here ",-1),_=t("p",{class:"p-2"}," Dropdown content here ",-1),h={__name:"FwbDropdownExamplePlacement",setup(E){return(y,i)=>(e(),c("div",d,[s(a(o),{placement:"top",text:"Top"},{default:n(()=>[u]),_:1}),s(a(o),{placement:"right",text:"Right"},{default:n(()=>[m]),_:1}),s(a(o),{text:"Bottom"},{default:n(()=>[w]),_:1}),s(a(o),{placement:"left",text:"Left"},{default:n(()=>[_]),_:1})]))}},D={class:"vp-raw"},F={__name:"FwbDropdownExampleListGroup",setup(E){return(y,i)=>(e(),c("div",D,[s(a(o),{text:"Menu"},{default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},f={class:"vp-raw"},b=t("span",null,"Custom Trigger Element",-1),A={__name:"FwbDropdownExampleTrigger",setup(E){return(y,i)=>(e(),c("div",f,[s(a(o),null,{trigger:n(()=>[b]),default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},q=r('

Vue Dropdown - Flowbite ​

Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements ​

TIP

Original reference: https://flowbite.com/docs/components/dropdowns/

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

',6),C=r(`
vue
<template>
  <fwb-dropdown text="Bottom">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="top" text="Top">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="right" text="Right">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="left" text="Left">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown text="Bottom">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="top" text="Top">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="right" text="Right">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="left" text="Left">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
`,2),v=r(`
vue
<template>
  <fwb-dropdown text="Menu">
    <list-group>
      <list-group-item>
        Profile
      </list-group-item>
      <list-group-item>
        Settings
      </list-group-item>
      <list-group-item>
        Messages
      </list-group-item>
      <list-group-item>
        Download
      </list-group-item>
    </list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown text="Menu">
    <list-group>
      <list-group-item>
        Profile
      </list-group-item>
      <list-group-item>
        Settings
      </list-group-item>
      <list-group-item>
        Messages
      </list-group-item>
      <list-group-item>
        Download
      </list-group-item>
    </list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
`,2),B=r(`
vue
<template>
  <fwb-dropdown text="Bottom">
    <template #trigger>
      <span>Custom Trigger Element</span>
    </template>
    <list-group>
      <list-group-item>
        Profile
      </list-group-item>
      <list-group-item>
        Settings
      </list-group-item>
      <list-group-item>
        Messages
      </list-group-item>
      <list-group-item>
        Download
      </list-group-item>
    </list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown text="Bottom">
    <template #trigger>
      <span>Custom Trigger Element</span>
    </template>
    <list-group>
      <list-group-item>
        Profile
      </list-group-item>
      <list-group-item>
        Settings
      </list-group-item>
      <list-group-item>
        Messages
      </list-group-item>
      <list-group-item>
        Download
      </list-group-item>
    </list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
`,1),j=JSON.parse('{"title":"Vue Dropdown - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/dropdown.md","filePath":"components/dropdown.md"}'),x={name:"components/dropdown.md"},H=Object.assign(x,{setup(E){return(y,i)=>(e(),c("div",null,[q,s(h),C,s(F),v,s(A),B]))}});export{j as __pageData,H as default};