mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
committed by
Eugenio Romano
parent
285e56e9fb
commit
5fc05da7aa
57
docs/core/components/buttons-menu.component.md
Normal file
57
docs/core/components/buttons-menu.component.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
Title: Buttons Menu Component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-08
|
||||
---
|
||||
|
||||
# [Buttons Menu Component](../../../lib/core/buttons-menu/buttons-menu.component.ts "Defined in buttons-menu.component.ts")
|
||||
|
||||
Displays buttons on a responsive menu.
|
||||
|
||||

|
||||
|
||||
## Basic Usage
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
Place the buttons for the menu inside this component's HTML tags.
|
||||
They must use the following structure:
|
||||
|
||||
```html
|
||||
<adf-buttons-action-menu>
|
||||
<button mat-menu-item (click)="showSettings()">
|
||||
<mat-icon>settings</mat-icon><span>Settings</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="delete()">
|
||||
<mat-icon>delete</mat-icon><span>Delete</span>
|
||||
</button>
|
||||
</adf-buttons-action-menu>
|
||||
```
|
||||
|
||||
Note that the buttons themselves also have an icon (supplied as a `<mat-icon`)
|
||||
and a label (supplied as a `<span>`).
|
||||
They also make use of the Angular material directive `mat-menu-item`.
|
||||
|
||||
```html
|
||||
<button mat-menu-item (click)="event()">
|
||||
<mat-icon> icon </mat-icon>
|
||||
<span> label </span>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
This component is fully responsive and it will display one of two different layouts
|
||||
depending on the screen size:
|
||||
|
||||
**Desktop View**
|
||||
|
||||

|
||||
|
||||
**Mobile View**
|
||||
|
||||

|
||||
|
||||
The component has a property called `isMenuEmpty` that you can access from code. If this is
|
||||
set to true then the component will not show an empty menu with no buttons defined.
|
Reference in New Issue
Block a user