inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2824] Doc review and minor changes to review checker tool (#3466)

Browse Source
This commit is contained in:
Andy Stark
2018-06-11 09:48:02 +01:00
committed by Eugenio Romano
parent 3281891dcd
commit d152c367aa
29 changed files with 336 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/core/buttons-menu.component.md
View File

@@ -1,16 +1,18 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-04-24
Last reviewed: 2018-06-08
---
# Buttons Menu Component
Displays buttons on a responsive menu. This way the html doesn't need to
Displays buttons on a responsive menu.
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
## Basic Usage
In order to use this component, you will have to place the buttons that you want to have in your menu inside this component's html tags.
Place the buttons for the menu inside this component's HTML tags.
They must use the following structure:
```html
@@ -24,7 +26,8 @@ They must use the following structure:
</adf-buttons-action-menu>
```
Notice that they need an icon and a label for the button inside a span tag. They also make use of the Angular material directive `mat-menu-item`.
Notice that the buttons have an icon and a label for the button inside a `<span>` tag.
They also make use of the Angular material directive `mat-menu-item`.
```html
<button mat-menu-item (click)="event()">
@@ -32,21 +35,20 @@ Notice that they need an icon and a label for the button inside a span tag. They
<span> label </span>
</button>
```
## Class members
### Properties
| Name | Type | Description |
| -- | -- | -- |
| isMenuEmpty | boolean | If the menu has no buttons it won't be displayed. |
## Details
This component is fully responsive and it will display two different layouts regarding the screen size.
This component is fully responsive and it will display one of two different layouts
depending on the screen size:
**Desktop View**
#### Desktop View
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
#### Mobile View
**Mobile View**
![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png)
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.