@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
42 lines (28 loc) • 1.59 kB
Markdown
# MActionListbox
An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | title displayed in mobile version. | `string` | - |
| `position` | Defines the position of the listbox relative to its trigger or container. | `"bottom"` `"top"` `"left"` `"right"` | `"bottom"` |
| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ id?: string` `undefined; icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
## Slots
| Name | Description |
| --- | --- |
| `activator` | Activator element that triggers the listbox. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `close` | Emits when the close button is clicked. | [] |
| `action` | Emits when an item is clicked, providing its id or index. | [value: string | number] |
## Dependencies
### Depends on
- [MDivider](../divider)
- [MIconButton](../iconbutton)
### Graph
```mermaid
graph TD;
MActionListbox --> MIconButton
MActionListbox --> MDivider
style MActionListbox fill:#008240,stroke:#333,stroke-width:4px
```