import {Toolbar} from 'primeng/primeng';
Toolbar is a container component defined using p-toolbar element. Left aligned content is placed inside a div having .ui-toolbar-group-left class and similarly .ui-toolbar-group-right for right alignment.
<p-toolbar>
<div class="ui-toolbar-group-left">
<button pButton type="button" label="New" icon="fa-plus"></button>
<button pButton type="button" label="Open" icon="fa-folder-open"></button>
<i class="fa fa-bars"></i>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
<p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
<p-splitButtonItem icon="fa-paint-brush" label="Theming" [url]="['Theming']"></p-splitButtonItem>
</p-splitButton>
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" icon="fa-search"></button>
<i class="fa fa-bars"></i>
<button pButton type="button" icon="fa-refresh"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>
</p-toolbar>
Name | Type | Default | Description |
---|---|---|---|
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-toolbar | Main container element. |
ui-toolbar-group-left | Left content container. |
ui-toolbar-group-right | Right content container. |
Native component that only requires the css of PrimeUI Toolbar.
<p-toolbar>
<div class="ui-toolbar-group-left">
<button pButton type="button" label="New" icon="fa-plus"></button>
<button pButton type="button" label="Open" icon="fa-folder-open"></button>
<i class="fa fa-bars"></i>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
<p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
<p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
<p-splitButtonItem icon="fa-paint-brush" label="Theming" [url]="['Theming']"></p-splitButtonItem>
</p-splitButton>
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" icon="fa-search"></button>
<i class="fa fa-bars"></i>
<button pButton type="button" icon="fa-refresh"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>
</p-toolbar>