Eos UI Angular Component library
This library supplies a collection of generic components with looks and behaviours that follow the WoodWing design guidelines.
Setup
Installing required packages
The library is published as an npm module which should make getting started very easy. To install, including peer dependencies:
npm i @angular/cdk @woodwing/eos-ui-angular
Global styles and theming
To make the components work and look like intended a couple of steps need to be taken.
Important
All components use the
em
as the basis for sizes. This should make it as straight-forward as setting thefont-size
on a sub-tree of components to implement zooming in and out.
Global styles
Add the following style files to /src/styles.sccs
.
// Normalize the default html styling
@import '~@woodwing/eos-ui-angular/styles/reboot';
// Load the fonts used by the themes exposed by the library
@import '~@woodwing/eos-ui-angular/styles/fonts';
// Set up some root level theming like the size of rem
@import '~@woodwing/eos-ui-angular/styles/base';
// Setup css for Angular CDK overlays
@import '~@angular/cdk/overlay-prebuilt';
Theme definition
Create a new /src/theming.ts
file with contents:
import { EosThemeService, pewter, white } from '@woodwing/eos-ui-angular';
// Define sections in the application that can be themed
export enum ThemeSections {
Main = 'main',
}
// Define the theme names that exist
export enum ThemeNames {
Light = 'light',
Dark = 'dark',
}
export function configureEosThemeModule(themeService: EosThemeService): void {
themeService.init(
// Tie the theme names to a theme definition. Use the predefined themes from the library
// or define your own.
new Map([
[ThemeNames.Light, white],
[ThemeNames.Dark, pewter],
]),
// Indicate which theme will initially be the active one for each section of the application
new Map([[ThemeSections.Main, ThemeNames.Light]]),
);
}
Load theme definitions
Add the EosThemeModule
to the AppModule's imports in /src/app/app.module.ts
import { EosThemeModule } from '@woodwing/eos-ui-angular';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, EosThemeModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Extend /src/app/app.component.ts
to call configureEosThemeModule
import { Component } from '@angular/core';
import { configureEosThemeModule } from '../theming';
import { EosThemeService } from '@woodwing/eos-ui-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private themeService: EosThemeService) {
configureEosThemeModule(this.themeService);
}
}
Set theme section
Add the eos-theme-root
directive to the top level element in /src/app/app.component.html
. As the value use the section name as defined in the theme sections. This will set the CSS variables as defined in the corresponding theme on the body element of the document which makes inheriting in CSS work correctly.
<router-outlet eos-theme-root="main"></router-outlet>
eos-theme-container
and eos-theme-root-container
Using eos-theme-container
and eos-theme-root-container
can used in situations where the directive cannot be used, for example in AngularJS applications which do not support downgrading Angular directives.
<eos-theme-container section="header"></eos-theme-container>
Using the components
The various components available in the library are split up in component modules. In order to be able to use the component, the component module needs to be imported in the module that will be using it. Once it has been imported, the components and directives in the component module are ready for use in the component templates and code.
As an example of the use of the eos-button
component, you should import the EosButtonModule
module first.
import { EosButtonModule } from '@woodwing/eos-ui-angular';
@NgModule({
...
imports: [EosButtonModule]
...
})
In your template you can then do:
<button eos-button>Button</button>