mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
82 lines
2.1 KiB
Markdown
82 lines
2.1 KiB
Markdown
---
|
|
Added: v2.4.0
|
|
Status: Active
|
|
Last reviewed: 2018-04-24
|
|
---
|
|
|
|
# Buttons Menu Component
|
|
|
|
Displays buttons on a responsive menu.
|
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<adf-buttons-action-menu
|
|
[buttons]="buttons">
|
|
</adf-buttons-action-menu>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| -- | -- | -- | -- |
|
|
| buttons | [`MenuButton[]`](../../lib/core/buttons-menu/menu-button.model.ts) | | Array of buttons that defines the menu. |
|
|
|
|
## Details
|
|
|
|
This component shows buttons on a responsive menu. The display of the menu changes to fit
|
|
the screen size of the device:
|
|
|
|
Desktop view of the menu
|
|
|
|
|
|
|
|
Mobile view of the menu
|
|
|
|
|
|
|
|
The `buttons` property contains an array of [MenuButton](../../lib/core/buttons-menu/menu-button.model.ts) instances that define
|
|
the label and appearance of each button along with a handler function to
|
|
implement its action:
|
|
|
|
```ts
|
|
buttons: MenuButton[] = [];
|
|
|
|
setButtons() {
|
|
this.buttons = [
|
|
new MenuButton({
|
|
label: 'Settings',
|
|
icon: 'settings',
|
|
handler: this.settings.bind(this)
|
|
}),
|
|
new MenuButton({
|
|
label: 'Delete',
|
|
icon: 'delete',
|
|
handler: this.deleteItem.bind(this, this.reportId),
|
|
id: 'delete-button'
|
|
}),
|
|
new MenuButton({
|
|
label: 'Export',
|
|
icon: 'file_download',
|
|
handler: this.exportItem.bind(this),
|
|
id: 'export-button',
|
|
isVisible: this.isItemValid.bind(this)
|
|
}),
|
|
new MenuButton({
|
|
label: 'Save',
|
|
icon: 'save',
|
|
handler: this.saveItem.bind(this),
|
|
id: 'save-button',
|
|
isVisible: this.isItemValid.bind(this)
|
|
})
|
|
];
|
|
```
|
|
|
|
## See also
|
|
|
|
- [Menu Button Model](./menu-button.model.md)
|