Menu

cf-menu

CF Menu represents a Menu with extended attributes such as icon and notifications. It consists of two components:

• cfMenu;

• cfMenuItem.

Properties and Styling

app.html

<md-grid-list cols="2" rowHeight="150px">
    <md-grid-tile>
        <p>{{title}}:</p>
        <cf-menu [properties]="menu" [styling]="menuStyling1" (cfItemAction)="log($event)"></cf-menu>
    </md-grid-tile>
    <md-grid-tile>
        <p>{{title2}}:</p>
        <cf-menu></cf-menu>
    </md-grid-tile>
    <md-grid-tile>        
        <cf-menu [properties]="menuAccounts" [notification]="myNotifications"></cf-menu>
    </md-grid-tile>
    <md-grid-tile>
        <cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
    </md-grid-tile>
</md-grid-list>
<h4>List of ckicked items:</h4>
<pre *ngFor="let item of items">{{item | json}}</pre>

app.ts

title: string = "CF Demo Menu 1";
isShown: Boolean = false;
isDisabled: Boolean = true;

clickFunc(menuItem): void {
    menuItem.display = !menuItem.display;
}

letters = 0;

myNotifications: NotificationModel = {
    value: this.letters,
    classes: 'mat-accent',
  };
sender = new ButtonModel({
    label: "Send mail",
    color: {
        foreground: "",
        background: "primary"
    },
    icon: null,
    icon_position:"right"
});

sendMessage() { ++this.myNotifications.value; }

menu= new MenuModel ({ 
    menuItems : [
        {
            buttonProperty:{        
                label: "Hide me on click",
                iconProperty: new IconModel ({
                    name: 'fa-apple',
                    size: '24px'
                }),
                iconPosition:"right"
            },
            notification: this.myNotifications,
            divider: true,
            onClick: this.clickFunc.bind(this)
        },
        {
            buttonProperty:{        
                label: "Disabled",
                iconProperty: new IconModel ({
                    name: 'fa-apple',
                    size: '24px'
                }),
                iconPosition:"right",
                disabled: true
            },
            onClick: this.clickFunc.bind(this)
        },
    ]
});

menuStyling1 = new MenuStylingModel ({
    container:{},
    menuItemStyling: new MenuItemStylingModel({
        buttonStyling: new ButtonStylingModel({
            iconStyling:new IconStylingModel({
                class:"iconMenu1"
            })
        })
    })
});

title2: string = "CF Default Menu Template";

menuAccounts= new MenuModel ({  
    triggerIcon: new IconModel ({
        name: "account_balance",
        size: "30px"
    }),
    menuItems: [
    {
        buttonProperty:{
            label: "USD account",
            iconProperty: new IconModel ({
                name: 'fa-usd',
                size: '24px'
            }),
            iconPosition:"left",
        },
        notification: null,
        onClick: null
    },
    {
        buttonProperty:{
            label: "EURO account",
            iconProperty: new IconModel ({
                name: 'fa-eur',
                size: '24px'
            }),
            iconPosition:"left",
        },
        notification: null,
        onClick: null
    },
    {
        buttonProperty: {
            label: "GBP account",
            iconProperty: new IconModel ({
                name: 'fa-gbp',
                size: '24px'
            }),
            iconPosition:"left",
        },
        notification: null,
        onClick: null
    }
]});

items = [];

log(e) {
    console.log('e', e);
    this.items.push(e);
}

menuStyling2 = new MenuStylingModel ({
    container:{},
    iconStyling: new IconStylingModel({
        container: {},
        icon:{
            class:"trigger1"
        }
    }),
    menuItem: new MenuItemStylingModel({
        buttonStyling: new ButtonStylingModel({
            iconStyling: new IconStylingModel({
                icon:{
                    class:"iconMenu2"
                }
            })
        }),
    })
});

app.scss

p {
    margin-right: 16px;
}

/deep/ {
    .iconMenu1 {
        color: #4caf50;
    }
    .iconMenu2 {
        color: #7a73a9;
    }
    .trigger1 {
        color: #ffffff;
        background-color: #1b83b8;
    }
}

Menu input properties

Attr	Type	Details
display	boolean	To show / hide component
showTrigger	boolean	To show / hide menu trigger icon
disableTrigger	boolean	Menu trigger icon to be disabled
menuItems	MenuItemModel[]	Array of menu items with type MenuItemModel
triggerIcon	IconModel	IconModel data for menu trigger icon

Menu styling properties

Attr	Type	Details
container	StylingModel	Styling properties for menu container
iconStyling	IconStylingModel	Styling for trigger menu icon
menuItemStyling	MenuItemStylingModel	Styling for menu items

Menu output properties

Attr	Details
cfItemAction	Emit event on menu item click. Event has object with next structure: { cfIndex: index, cfItem: item } with index and object of clicked menu item.

Menu item input properties

Attr	Type	Details
buttonProperty	ButtonModel	The configuration model for the button
divider	boolean	Set to true to have a divider under this item
notification	string	It is menu item notification. Can mean number of notifications.
onClick	any	It is menu item click event

Menu item styling properties

Attr	Type	Details
container	StylingModel	Styling properties for menu item container
buttonStyling	ButtonStylingModel	Styling for menu item button