import {ToolbarModule} 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()" [model]="items"></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()" [model]="items"></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>