inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
alfresco-ng2-components/docs/core/buttons-menu.component.md
Andy Stark 2c49de6070 [ADF-3514] Added transclusions sections to doc files (#3756) 
* [ADF-3514] Added transclusion sections and guide page

* [ADF-3514] Updated tables of contents where needed

* [ADF-3514] Updated index files
2018-09-10 11:11:25 +01:00

1.5 KiB
Raw Blame History

Added, Status, Last reviewed
Added Status Last reviewed
v2.4.0 Active 2018-06-08

Buttons Menu Component

Displays buttons on a responsive menu.

adf-buttons-menu-desktop

Basic Usage

Transclusions

Place the buttons for the 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>

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.

<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

adf-buttons-menu-desktop

Mobile View

adf-buttons-menu-mobile

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.