Installation
import { WrToolbar } from 'ngwr/toolbar';
@Component({ imports: [WrToolbar] })
export class MyComponent {}Basic
<wr-toolbar>
<div wrToolbarStart><strong>Items</strong></div>
<div wrToolbarCenter><wr-btn>Grid</wr-btn> <wr-btn>List</wr-btn></div>
<div wrToolbarEnd><wr-btn color="primary">New</wr-btn></div>
</wr-toolbar>Narrow container (container query)
With responsive, the zones stack when the toolbar's own box is too narrow for a row — a container query on its own width, so it adapts inside a split pane or sidebar on any screen. The box below is fixed at 320px.
<div style="width: 320px"><wr-toolbar responsive>…</wr-toolbar></div>API
| Name | Description | Type | Default |
|---|---|---|---|
responsive | Stack the zones vertically when the toolbar's own box is too narrow to fit them in a row (a container query on its own width, not the viewport — so it adapts inside a narrow column or split pane). | boolean | false |