Narnia's Poofy Meatcleaver

    @woodwing/eos-ui-angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.75 • Public • Published

    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 the font-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>

    Using eos-theme-container and eos-theme-root-container

    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>

    Available components

    Keywords

    none

    Install

    npm i @woodwing/eos-ui-angular

    DownloadsWeekly Downloads

    134

    Version

    0.0.75

    License

    Apache-2.0

    Unpacked Size

    2.73 MB

    Total Files

    471

    Last publish

    Collaborators

    • sno
    • vintik5000
    • jhu
    • bkr-woodwing
    • jaapvb