ComponentComposite

Toolbar

An action bar with start, center and end zones.

Installation

Import the class, and @use the entry point in your global styles: without it the component renders unstyled.

import { Component } from '@angular/core';
import { WrToolbar } from 'ngwr/toolbar';

@Component({ imports: [WrToolbar] })
export class MyComponent {}

Basic

An empty zone takes no space.

<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>
Items
GridList
New

Narrow container (container query)

With responsive, the zones stack when the toolbar itself is narrow.

Items
GridList
New
<div style="width: 320px"><wr-toolbar responsive>…</wr-toolbar></div>

API

NameDescriptionTypeDefault
responsiveStack 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).booleanfalse

CSS variables

Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/toolbar's own element.

VariableDefaultDeclared on
--wr-toolbar-bordervar(--wr-border-base).wr-toolbar
--wr-toolbar-font-familyvar(--wr-font-family-base).wr-toolbar
--wr-toolbar-gapvar(--wr-space-md).wr-toolbar
--wr-toolbar-padding-xvar(--wr-space-lg).wr-toolbar
--wr-toolbar-padding-yvar(--wr-space-sm).wr-toolbar
--wr-toolbar-radiusvar(--wr-border-radius-base).wr-toolbar
--wr-toolbar-zone-gapvar(--wr-space-sm).wr-toolbar

See also

2022 – 2026 © Roman Khegayv15.1.0