alfresco-ng2-components/docs/core/buttons-menu.component.md
davidcanonieto 3759a7967c ADF-2974] New Buttons Menu component version (#3429)
* [ADF-2974] Buttons injected from parent html component

* [ADF-2974] New version of buttons menu component

* [ADF-2974] Updated unit tests

* [ADF-2974] Updated documentation

* [ADF-2974] Removed unused variable

* [ADF-2974] Fixed failing test at analytics report parameters

* [ADF-2974] Removed fdescribe

* [ADF-2974] Moved mock inside testing file for buttons menu component
2018-06-07 00:07:54 +02:00

1.4 KiB

Added, Status, Last reviewed
Added Status Last reviewed
v2.4.0 Active 2018-04-24

Buttons Menu Component

Displays buttons on a responsive menu. This way the html doesn't need to

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. They must use the following structure:

<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>  

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.

<button mat-menu-item (click)="event()">
        <mat-icon> icon </mat-icon>
        <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.

Desktop View

adf-buttons-menu-desktop

Mobile View

adf-buttons-menu-mobile