@stejnar/sidebar

@stejnar/sidebar

Angular component library for tabbed sidebars.

Features

• Simple navigation implementation for @stejnar/tabs and @angular/router
• Semantic encapsulation with tabs
• Customizable in style, height and width
• Smooth animations

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

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

Installation

• $ npm install --save @stejnar/sidebar --production
• Include in Webpack or SystemJS

Components

1. Sidebar

<sidebar>

@Input elementHeight: number

• height of sidebar children in em
• defaults to 4

@Input widthRatio: number

• widthRatio * elementHeight = width
• width of sidebar in em
• defaults to 4

2. SidebarItem

<sidebar-item>

@Input providerName: string

• refers to StateProvider of @stejnar/tabs TabsService

@Input url: string

• url to navigate to

@Input text: string

• text to be displayed

@Input icon: string

• class for bootstrap or iconmoon icons

3. SidebarTab

<sidebar-tab>

@Input tabName: string

• refers to TabComponent of @stejnar/tabs

@Input text: string

• text to be displayed

@Input icon: string

• class for bootstrap or iconmoon icons

4. SidebarService

Subscriptable slideInOut$: BehaviorSubject

• subscribe to listen on slide event

Subscriptable active$: BehaviorSubject

• subscribe to get active tab

Usage

<sidebar>
    <sidebar-item text="Apples"
                  url="/apples"
                  providerName="apples"
                  icon="em em-apple">
        <sidebar-tab tabName="red"
                     text="Red"
                     icon="em em-ant">
        </sidebar-tab>
        <sidebar-tab tabName="yellow"
                     text="Yellow"
                     icon="em em-balloon">
        </sidebar-tab>
        <sidebar-tab tabName="green"
                     text="Green"
                     icon="em em-beer">
        </sidebar-tab>
    </sidebar-item>
    <sidebar-item text="Bananas"
                  url="/bananas"
                  providerName="bananas"
                  icon="em em-banana">
        <sidebar-tab tabName="straight"
                     text="Straight"
                     icon="em em-ng">
        </sidebar-tab>
        <sidebar-tab tabName="curved"
                     text="Curved"
                     icon="em em-cl">
       </sidebar-tab>
    </sidebar-item>
</sidebar>

Future Possibilities

• Router navigation for SidebarTab via routerLink
• ...

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-sdiebar.git
  

• Start the build process and go to localhost:
  

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