Button Menu

Button Menu represents a Button with Menu. It consists of four components:

• cfButtonMenu;

• cfMenu;

• cfMenuItem;

• cfButton.

Properties and Styling

app.html

<div>
    <cf-button-menu></cf-button-menu>
    <cf-button-menu [properties]="buttonMenu1" [styling]="buttonMenuStyling1" (onClick)="function1()"></cf-button-menu>
    <cf-button-menu [properties]="buttonMenu2" [styling]="buttonMenuStyling2" [notification]="myNotifications"></cf-button-menu>
</div>
<div class="custom">
    <cf-button style="margin: 20px" md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
</div>

app.ts

isShown: Boolean = false;
isDisabled: Boolean = true;

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

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

icon1= new IconModel ({        
    name: "pets",
    size: "20px"
});

button1= new ButtonModel ({        
    label: "Primary",
        iconProperty: this.icon1,
    iconPosition:"left"
});

icon2= new IconModel ({        
    name: "fa-bell",
    size: "20px"
});

button2= new ButtonModel ({        
    label: "Accent",
        iconProperty: this.icon2,
    iconPosition:"left"
});

buttonMenu1 = new ButtonMenuModel({
    buttonProperty: this.button1,
    menuProperty: this.menu
});

buttonMenuStyling1 = new ButtonMenuStylingModel({
    buttonStyling: new ButtonStylingModel({
        button:{
            themeColor:"primary"
        }
    })
});

buttonMenu2 = new ButtonMenuModel({
    buttonProperty: this.button2,
    menuProperty: this.menu
});

buttonMenuStyling2 = new ButtonMenuStylingModel({
    buttonStyling: new ButtonStylingModel({
        button:{
            themeColor:"accent"
        }
    })
});

ngOnInit() {
    this.themes = ["","cf-red-theme","cf-blue-theme","cf-green-theme"];
}

function1(): void {
    alert('This is Button 1 speaking...');
}
function2(): void {
    alert('This is Button 2 speaking...');
}
letters = 0;
myNotifications: NotificationModel = {
      value: this.letters,
      classes: 'mat-primary',
      position: 'top-left'
};
sender = new ButtonModel({
    label: "Send mail",
        color: {
            foreground: "",
            background: "primary"
        },
        icon: null,
        icon_position:"right"
});
sendMessage() { ++this.myNotifications.value; }

app.scss

:host {
    display: flex;
    flex-direction: row;
    &>div {
        display: flex;
        flex-direction: column;    
        width: 50%;
        align-items: center;
        justify-content: center;        
    }
    &>div>cf-button-model {
        margin: 10px;
    }
}

Button menu input properties

Attr	Type	Details
buttonProperty	ButtonModel	The button object from Button Model
menuProperty	MenuModel	The menu property

Button menu output properties

Attr	Details
onClick	The event will be emitted when the button is clicked (left part of button). Click on right part of the button (with arrow down icon) is just opening dropdown menu.