@stejnar/toolbar v2.0.9

@stejnar/toolbar

Angular component library for responsive toolbars.

Features: 1. Scaling, responds to window resize event 2. Simple navigation implementation for @stejnar/tabs 3. Semantic encapsulation with groups

Build with lib-starter: https://github.com/Stejnar/lib-starter

npm package: https://www.npmjs.com/package/@stejnar/toolbar

Installation

1. $ npm install --save @stejnar/toolbar --production
2. Include in Webpack or SystemJS

Components

1. Toolbar

<toolbar>

2. ToolbarGroup

<toolbar-group>

@Input tabProvider: string

• Identifier of TabsComponent
• Optional, unless for use with TabsModule

4. ToolbarItem

<toolbar-item>

@Input tabName: string

• Identifier of TabComponent

• Optional, unless for use with TabsModule

  @Input text: string

• Text to be displayed

• Optional

  @Input icon: string

• Class for bootstrap, iconmoon etc icons

• Optional

Usage

<toolbar>
    // To take advantage of TabsModule, add coresponding tab provider
    <toolbar-group tabProvider="fruits">
        // Apply clickhandler
        <toolbar-item (click)="peach()"
                      text="Peaches"
                      icon="em em-peach">
        </toolbar-item>
        // For tab navigation, declare the coresponding tab name
        <toolbar-item tabName="apples"
                      text="Apples"
                      icon="em em-apple">
        </toolbar-item>
    </toolbar-group>
</toolbar>

Note:

Wonder how to implement a navigation with @angular/router? Just apply a click handler like that:

click(e) {
    router.navigateByUrl('/pat/to/route/', options);
}

and bind it to toolbar-item.

Future Possibilities

Any suggestions? Contact me or collaborate! Send an e-mail to: a.butkereit@gmail.com

Demo

1. Fork the git repository and clone it with:

   $ git clone https://github.com/Stejnar/stejnar-toolbar.git

2. Start the build process and go to localhost:

   $ cd stejnar-tabs-master
   $ npm install
   $ npm run build:example
   $ npm start