Components
Button Dropdown
A button that opens a menu of actions, optionally split into a main action and a menu toggle.
import { ButtonDropdownComponent, ButtonDropdownItemComponent } from '@/MigsLab/shared'
Dropdown
<ButtonDropdownComponent color="secondary" bordered rounded menu-align="left">
<template #button>Actions</template>
<template #menu>
<ButtonDropdownItemComponent @select="Edit_Select">Edit</ButtonDropdownItemComponent>
<ButtonDropdownItemComponent disabled>Archive</ButtonDropdownItemComponent>
</template>
</ButtonDropdownComponent>Split button
The left part emits action; the chevron opens the menu.
<ButtonDropdownComponent rounded split-button @action="Run_Click">
<template #button>Run process</template>
<template #menu>
<ButtonDropdownItemComponent @select="Schedule_Select">Schedule</ButtonDropdownItemComponent>
</template>
</ButtonDropdownComponent>Last action: none
API
ButtonDropdownComponent props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'primary' | 'secondary' | 'danger' | 'ghost' | 'primary' | Color variant of the button(s). |
size | 'sm' | 'md' | 'lg' | 'md' | Button size. |
outlined / bordered / rounded | boolean | false | Same as ButtonComponent. |
disabled | boolean | false | Disables the buttons and the menu. |
splitButton | boolean | false | Separate main action button and chevron toggle. |
closeOnSelect | boolean | true | Close the menu after an item is selected. |
menuAlign | 'left' | 'right' | 'right' | Which edge the menu lines up with. |
Events
| Event | Payload | Description |
|---|---|---|
action | MouseEvent | Split mode only: the main button was clicked. |
select (item) | MouseEvent | Emitted by ButtonDropdownItemComponent when chosen. |
Slots
| Name | Description |
|---|---|
button | Button label. |
menu | Menu content, usually ButtonDropdownItemComponent items. |
ButtonDropdownItemComponent props
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Greys out the item and ignores clicks. |