Dropdown

A menu triggered by clicking or hovering an element.

Basic Usage

<template>
  <bp-dropdown @select="handleSelect">
    <bp-button status="gray" type="secondary">Bottom</bp-button>

    <template #content>
      <bp-doption value="1">Option 1</bp-doption>
      <bp-doption value="2">Option 2</bp-doption>
      <bp-doption value="3">Option 3</bp-doption>
      <bp-doption value="4">Option 4</bp-doption>
      <bp-doption value="5">Option 5</bp-doption>
    </template>
  </bp-dropdown>
</template>

<script setup lang="ts">
const handleSelect = (value: string) => {
  console.log(value);
};
</script>

Trigger and Position

Configure trigger (click / hover) and position.

<template>
  <bp-space>
    <bp-dropdown trigger="hover" @select="handleSelect">
      <bp-button status="gray" type="secondary">Hover trigger</bp-button>

      <template #content>
        <bp-doption value="edit">Edit</bp-doption>
        <bp-doption value="copy">Copy</bp-doption>
        <bp-doption value="delete">Delete</bp-doption>
      </template>
    </bp-dropdown>

    <bp-dropdown trigger="click" position="bottom-right" style="margin-left: 16px" @select="handleSelect">
      <bp-button status="gray" type="secondary">Click trigger (right-aligned)</bp-button>

      <template #content>
        <bp-doption value="1">Option 1</bp-doption>
        <bp-doption value="2">Option 2</bp-doption>
        <bp-doption value="3" disabled>Disabled</bp-doption>
      </template>
    </bp-dropdown>
  </bp-space>
</template>

<script setup lang="ts">
const handleSelect = (value: string) => {
  console.log(value);
};
</script>

Dropdown Props

position	Popup position	TriggerPosition	bottom	-
trigger	Trigger	TriggerType	click	-

Doption Props

value	Option value	StringNumber	-	-
disabled	Whether disabled	Boolean	-	-

Dropdown Events

select

Triggered on select

value?: DoptionValue

-

Dropdown Methods

open	Open the dropdown	-	-	-
close	Close the dropdown	-	-	-

Dropdown Slots

default	Trigger area	-	-
content	Dropdown content	-	-

Doption Slots

default

Option content

-

-