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.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

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

NgpToolbar

Data Attributes

The following data attributes are applied to the ngpToolbar directive:

Attribute	Description	Value
data-orientation	The orientation of the toolbar.	horizontal | vertical

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.