Toolbar

The Toolbar primitive is a container for grouping related controls.

Import

Import the Toolbar primitives from ng-primitives/toolbar.

import { NgpToolbar } from 'ng-primitives/toolbar';

Usage

Assemble the toolbar directives in your template.

<div ngpToolbar>
  <!-- Toolbar content -->
</div>

Reusable Component

Create a reusable component that uses the NgpToolbar directive.

Schematics

Generate a reusable toolbar component using the Angular CLI.

ng g ng-primitives:primitive toolbar

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

API Reference

The following directives are available to import from the ng-primitives/toolbar package:

NgpToolbar

Accessibility

Adheres to the WAI-ARIA Toolbar Design Pattern.

Keyboard Interaction

• Tab - Moves focus to the first interactive element in the toolbar.
• Arrow Down - Moves focus to the next interactive element (vertical orientation).
• Arrow Up - Moves focus to the previous interactive element (vertical orientation).
• Arrow Right - Moves focus to the next interactive element (horizontal orientation).
• Arrow Left - Moves focus to the previous interactive element (horizontal orientation).
• Home - Moves focus to the first interactive element in the toolbar.
• End - Moves focus to the last interactive element in the toolbar.