Toolbar

Component is build based on Angular Material Toolbar

Toolbar consists of six sections in html template:

• info;

• content;

• actions;

• close;

• toggle;

• collapsible.

Here it is default order of sections, but they can be reordered by each section order property. There are six ordering names:

1. first-section;

2. second-section;

3. third-section;

4. fourth-section;

5. fifth-section;

6. sixth-section

This is default sections order values. If it is needed to reorder sections, then order properties must be set logically correct.

Usage

app.html

<cf-toolbar #myControlledToolbar [properties]="myToolbar" [styling]="myStyling" (cfOnToolbarInfo)="log($event)" (cfOnToolbarActionItem)="log($event)" (cfOnToolbarToggle)="toggle($event)">
    <cf-image [properties]="myImage"></cf-image>
</cf-toolbar>

<div class="demo-content" [@toolbarState]="collapsibleState">
    <h4>Toolbar events:</h4>
    <pre *ngFor="let e of events">{{e | json}}</pre>
</div>

app.ts

@ViewChild('myControlledToolbar') myControlledToolbar;

collapsibleState = '';

isExpanded = false;

ngOnInit() {
    this.collapsibleState = this.isExpanded ? 'active' : 'inactive';
}

events = [];

log(e) {
    this.events.push(e);
}

toggle(e) {
    this.collapsibleState = e ? 'active' : 'inactive';
};

myToolbar2 = new ToolbarModel({
    info: {
        show: true,
        icon: {
            name: 'star',
            type: 'mi',
            size: '24px'
        }
    },
    content: {
        title: 'Toolbar with List Component'
    },
    actions: {
        show: true,
        menu: new MenuModel({  
            triggerIcon: new IconModel({ name: "menu" }),
            menuItems: [
                {
                    buttonProperty: {
                        label: 'Action item',
                        iconProperty: new IconModel({ name: 'account_balance' }),
                        iconPosition:"left",
                    },
                    notification: null,
                    onClick: null
                },
                {
                    buttonProperty: {
                        label: 'Action item',
                        iconProperty: new IconModel({ name: 'theaters' }),
                        iconPosition:"left",
                    },
                    notification: null,
                    onClick: null
                },
                {
                    buttonProperty: {
                        label: 'Action item',
                        iconProperty: new IconModel({ name: 'store' }),
                        iconPosition:"left",
                    },
                    notification: null,
                    onClick: null
                }
            ]
        })
    },
    close: {
        show: true
    },
    collapsible: {
        show: true,
        expanded: this.isExpanded
    }
});

myStyling = new ToolbarStylingModel({
    container: {
        class: 'cf-green-theme'
    },
    toolbar: {
        class: 'mat-primary'
    }
});

myImage = new ImageModel ({
    url: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQTAMLURYmqLQEBpqHr0PoiEvqTjT486Krf5_rZItvnSt_OIK-A'
});

app.scss

[hidden] {
    display: none !important;
}
.demo-content {
    padding: 0 16px;
    background: green;
    border-right: 4px solid #4caf50;
    border-bottom: 4px solid #4caf50;
    border-left: 4px solid #4caf50;
    box-shadow: inset 0px 0px 7px 3px rgba(0,0,0,0.3);
    overflow: hidden;
}

Toolbar input properties

Attr	Sub attr	Type	Details
template	-	string	Name of toolbar template. Optional. Means name with css class that have all needed styles for toolbar elements.
info		object	Optional info section
	show	boolean	To show / hide info section
	icon	IconModel	IconModel data for info section icon
	order	string	Order of info section. Default: first-section.
content		object	Optional content section
	title	string	Title for content section
	order	string	Order of content section. Default: second-section.
actions		object	Optional actions section
	show	boolean	To show / hide content section
	menu	MenuModel	MenuModel component for actions section
	order	string	Order of content section. Default: third-section.
close		object	Optional section for close icon
	show	boolean	To show / hide close icon section
	icon	IconModel	IconModel data for close button section icon
	order	string	Order of close section. Default: fourth-section.
toggle		object	Optional section for toggle icons
	show	boolean	To show / hide toggle icons section
	minimizeIcon	IconModel	IconModel data for minimizeIcon button section icon
	maximizeIcon	IconModel	IconModel data for maximizeIcon button section icon
	order	string	Order of toggle section. Default: fifth-section.
collapsible		object	Optional section for collapsible icon
	show	boolean	To show / hide collapsible icon section
	expanded	boolean	To set toolbar to be expanded
	icon	IconModel	IconModel data for info section icon
	order	string	Order of toggle section. Default: sixth-section.

Toolbar styling properties

Attr	Type	Details
container	StylingModel	Styling by type StylingModel
toolbar	StylingModel	StylingModel for md-toolbar
info	StylingModel	StylingModel for info section
infoIconStyling	IconStylingModel	IconStylingModel for info icon
content	StylingModel	StylingModel for content section
actions	StylingModel	StylingModel for actions section
actionsStyling	MenuStylingModel	MenuStylingModel for actions section menu
toggle	StylingModel	StylingModel for toggle section
minimizeIconStyling	IconStylingModel	IconStylingModel for minimize icon
maximizeIconStyling	IconStylingModel	IconStylingModel for maximize icon
collapsible	StylingModel	StylingModel for collapsible section
collapsibleIconStyling	IconStylingModel	IconStylingModel for collapsible icon
close	StylingModel	StylingModel for close section
closeIconStyling	IconStylingModel	IconStylingModel for close icon

Toolbar output properties

Attr	Detailsprevious
cfOnToolbarInfo	Emit event on info icon click with click event object
toolbarActionItemEvent	Emit action menu item event with object of clicked menu item
cfOnToolbarToggle	Emit toggle event with boolean value of toolbar expanded state
cfOnToolbarMaximize	Emit event with boolean value of toolbar maximized state