alfresco-ng2-components/buttons-menu.component.md at b2b3625929fe6656924b0e9df2cf72a78a5e00dd

mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00

davidcanonieto b2b3625929 [ADF-2650] Error with rootDir at insights folder fixed (#3215 )

* [ADF-1939] Responsive button to edit reports

* [ADF-1939] Removed unused dependencies in material module

* [ADF-1939] Edit buttons now use flex layout

* [ADF-2650] Report action menu component created

* [ADF-2650] Added Button Model

* [ADF-2650] Buttons component finished

* [ADF-2650] Buttons menu component moved to core library

* [ADF-2650] Included index.ts in core/buttons-menu

* [ADF-2650] cleaned the module and public api file

* Revert "[ADF-2650] Included index.ts in core/buttons-menu"

This reverts commit 6bdf1f2f48a30bb4622eb4c000e5318370503710.

* [ADF-2650] Applied the peer review changes

* [ADF-2650] Comment removed

* [ADF-2650] Failing tests fixed

* [ADF-2650] Dynamic theming for analytic reports

* [ADF-2650] Themes not ap

2018-04-26 14:56:05 +01:00

2.5 KiB

Raw Blame History

Added, Status

Added	Status
v2.4.0	Active

Displays buttons on a responsive menu.

Basic Usage

This component shows buttons on a responsive menu that changes depending on the device's screen.

<adf-buttons-action-menu
    [buttons]="buttons">
</adf-buttons-action-menu>

You will need to declare all the buttons that you want to have inside your menu in the parent component.

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)
            })
        ];

Properties

####Buttons Menu Component

Name	Type	Description
buttons	`MenuButton []`	The array that contains all the buttons for the menu

####Button Model

Name	Type	Description
label	`string`	Label to display for the button.
icon	`string`	Icon to display for the button.
handler	`function`	Callback for the event handler once the button is clicked.
styles	`string`	Classes to apply to the button.
id	`string`	Id of the button.
isVisible	`function`	Variable to define if button is visible or hidden. This function must return a boolean parameter. For instance, if it returns true the button will be visible. If it returns false the button will be hiden.

Details

This component uses Angular Material to style the menu.

Desktop view of the menu

Mobile view of the menu

Menu Button Model

2.5 KiB Raw Blame History

Buttons Menu Component

Basic Usage

Properties

Details

See also

2.5 KiB

Raw Blame History