@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: [email protected]

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