@stejnar/toolbar

@stejnar/toolbar

Angular component library for responsive toolbars.

Features:

• Scaling, responds to window resize event
• Simple navigation implementation for @stejnar/tabs
• Semantic encapsulation with groups

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

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

Installation

• $ npm install --save @stejnar/toolbar --production
• 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:
[e-mail]

Demo

• Fork the git repository and clone it with:
  

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

• Start the build process and go to localhost:
  

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