Bravura UI Components for Angular applications

This package contains a set of UI components built on top of Angular Material library and Component Development Kit. It supplements Angular Material in implementing Bravura UX Design System, which is an extension of the latest Material Design Specification.

Storybook on Chromatic

Angular version compatibility

| BUI versions | Compatible Angular versions | | ------------ | --------------------------- | | ^5.0.0 | 18 | | ^4.0.0 | 17 | | ^3.0.0 | 15, 16 | | ^2.0.0 | 14 | | ^1.15.x | 12, 13 | | 1 .. 1.14.x | 12 |

MDC-based releases

From version 3.0 onward, the package @bravura/ui is only compatible with @angular/components 15.1 and up, which is based on the Offical Material Design Components for web. Please refer to this document for more information.

To continue to use @bravura/ui at the latest version in your Angular projects, you must upgrade both Angular and Angular Material packages to version 15 or later. You must also you run the migration tool to switch from the legacy component implementations to the new MDC-based ones. The legacy components from @angular/components are no longer supported.

Setup

Install the package in your Angular project by using one of the commands below, according to the package manager chosen.

NPM:

npm install --save @bravura/ui

Yarn:

yarn add @bravura/ui

Import the NgModule from one of the sub-packages where the component is provided. For example:

@import {RadioPanelModule} from '@bravura/ui/radio-panel'
@NgModule({
	declarations: [MyComponent],
	imports: [RadioPanelModule]
})
export class MyModule {}

Theming

To incorporate components' theming with Angular Material, you need to configure a custom theme, following the theming guide on the Angular Material document site. In the global style SASS partial where the Material theme is configured, add the BUI theme mixin reference to activate theming.

You may also need to include the CSS of custom font definitions for Material Icon Font into the global stylesheets.