Dropdown
Used for displaying empty data state.
Basic Usage
<template>
<div>
<b-dropdown>
<a href="javascript:void(0)">
Dropdown
<b-icon name="down"></b-icon>
</a>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item selected>Donkey Burger</b-dropdown-item>
<b-dropdown-item disabled>Zhajiang Noodles</b-dropdown-item>
<b-dropdown-item>Beef Noodles</b-dropdown-item>
<b-dropdown-item divided>Braised Chicken</b-dropdown-item>
<b-dropdown-item>Street BBQ</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
<b-dropdown style="margin-left: 20px">
<b-button type="primary">
Dropdown
<b-icon name="down"></b-icon>
</b-button>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item>Donkey Burger</b-dropdown-item>
<b-dropdown-item disabled>Zhajiang Noodles</b-dropdown-item>
<b-dropdown-item>Beef Noodles</b-dropdown-item>
<b-dropdown-item divided>Braised Chicken</b-dropdown-item>
<b-dropdown-item>Street BBQ</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
</div>
</template>Trigger mode
<template>
<b-space>
<b-dropdown trigger="hover">
<b-button type="primary">
Hover Trigger
<b-icon name="down"></b-icon>
</b-button>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item name="Donkey Burger" selected>Donkey Burger</b-dropdown-item>
<b-dropdown-item name="Zhajiang Noodles" disabled>Zhajiang Noodles</b-dropdown-item>
<b-dropdown-item name="Beef Noodles">Beef Noodles</b-dropdown-item>
<b-dropdown-item name="Braised Chicken" divided>Braised Chicken</b-dropdown-item>
<b-dropdown-item name="Street BBQ">Street BBQ</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
<b-dropdown>
<b-button type="primary">
Click Trigger
<b-icon name="down"></b-icon>
</b-button>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item selected>Donkey Burger</b-dropdown-item>
<b-dropdown-item disabled>Zhajiang Noodles</b-dropdown-item>
<b-dropdown-item>Beef Noodles</b-dropdown-item>
<b-dropdown-item divided>Braised Chicken</b-dropdown-item>
<b-dropdown-item>Street BBQ</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
<b-dropdown trigger="contextmenu">
<b-button type="primary">
Right Click
<b-icon name="down"></b-icon>
</b-button>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item>Back</b-dropdown-item>
<b-dropdown-item style="color: #ed4014">Delete</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
</b-space>
</template>Nesting Usage
<template>
<div>
<b-dropdown placement="right-start">
<a href="javascript:void(0)">
Xuzhou小吃
<b-icon name="down"></b-icon>
</a>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item>驴肉火烧</b-dropdown-item>
<b-dropdown-item>牛肉板面</b-dropdown-item>
<b-dropdown placement="right-start">
<b-dropdown-item>
特色菜系
<b-icon name="right"></b-icon>
</b-dropdown-item>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item>地锅鸡</b-dropdown-item>
<b-dropdown-item>狗肉</b-dropdown-item>
<b-dropdown-item>把子肉</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
<b-dropdown-item>过桥米线</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
</div>
</template>directiveevent
<template>
<div>
<b-dropdown @command="handleClick">
<b-button>
下拉menu
<b-icon name="down"></b-icon>
</b-button>
<template #dropdown>
<b-dropdown-menu>
<b-dropdown-item name="驴肉火烧" selected>驴肉火烧</b-dropdown-item>
<b-dropdown-item name="炸酱面" disabled>炸酱面</b-dropdown-item>
<b-dropdown-item name="牛肉板面">牛肉板面</b-dropdown-item>
<b-dropdown-item :name="['Xuzhou美食', '地锅鸡']" divided>地锅鸡</b-dropdown-item>
<b-dropdown-item :name="{ type: 'info', name: '街边烧烤' }">街边烧烤</b-dropdown-item>
</b-dropdown-menu>
</template>
</b-dropdown>
</div>
</template>
<script setup lang="ts">
import { Message } from 'bin-ui-design'
function handleClick(name) {
console.log(name)
Message('click on item: ' + JSON.stringify(name))
}
</script>Dropdown props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| trigger | Trigger mode | String | hover / click / contextMenu (right click) | click |
| placement | Position where the dropdown menu appears | String | top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end | bottom |
| appendToBody | Whether to place in body. Recommended when used in Tabs or fixed Table columns, as it won't be affected by parent styles for better results | Boolean | true | |
| hide-on-click | Whether to hide menu after clicking a menu item | Boolean | - | true |
| show-timeout | Delay before expanding the dropdown menu (only effective when trigger is hover) | Number | - | 150 |
| hide-timeout | Delay before hiding the dropdown menu (only effective when trigger is hover) | Number | - | 150 |
| tabindex | Tabindex of the dropdown component | Number | - | 0 |
Dropdown events
| Event Name | Description | Return Value |
|---|---|---|
| command | Triggers when a menu item is clicked | The name value of DropdownItem; name must be set for unified listening |
| visible-change | Called when menu visibility changes | visible |
Dropdown Slot
| Name | Description |
|---|---|
| default | Main content |
| dropdown | List content, typically filled by b-dropdown-menu |
Dropdown Item props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| name | Used to identify this item | Object, String, Number | - | - |
| disabled | Disables this item | Boolean | - | false |
| divided | Show divider | Boolean | - | false |
| selected | Mark this item as selected | Boolean | - | false |
| icon | icon | String | - | - |