@stejnar/tabs
Angular component library for reusable tab views.
Components are agnostic but can be extended for styling or to reduce the DOM tree.
The Service allows tabs to be nested and remember the latest tab.
Build with lib-starter: https://github.com/Stejnar/lib-starter
npm package:
https://www.npmjs.com/package/@stejnar/tabs
Installation
$ npm install --save @stejnar/tabs --production
- Include in Webpack or SystemJS
Components
1. TabsComponent
<tabs>
@Input name: string
- Identifier - must be unique.
addTab(tab: Tab): void
- Registers this instance of Tab on the parent or TabsComponent.
- tab: Instance of TabComponent.
selectTab(tab: Tab): void
- Finds the given tab and sets its state to active.
- tab: Instance of TabComponent.
2. TabComponent
<tab>
@Input name: string
- Identifier - must be unique.
@Input title: string
- Title to be displayed in a h4.
3. TabsService
registerStateProvider(name: string): BehaviorSubject
- Returns a BehaviourSubject, that can be subscribed to get the current tab.
- name: TabsComponent identifier
setTab(providerName: string, tabName: string, provider?: StateProvider): void
- Pushes the new state of this tab to the subscription of this provider.
- providerName: TabsComponent identifier.
- tabName: TabComponent identifier.
- provider: There is no implementation to get a provider, therefore it's only used private.
Usage
Out of the box:
<tabs name="diet">
<tab name="fruits" title="I am a fruitarian!">
...
</tab>
<tab name="veggie" title="I am a veggie!">
...
</tab>
<tab name="meat" title="I am a meatboy!">
...
</tab>
</tabs>
Extend components:
ParentComponent:
@Component({
selector: 'parent-component',
template: `
<child-component></child-component>
<child-component></child-component>
`
})
export class ParentComponent extends TabsComponent {
name: string = 'custom';
constructor(tabsService: TabsService) {
super(tabsService);
}
...
}
ChildComponent:
@Component({
selector: 'child-component',
template: `
<h4>{{ title }}</h4>
<ng-content></ng-content>
`,
host: {
'[style.display]': 'active ? "block" : "none"'
}
})
export class ChildComponent extends TabComponent {
name: string = "child1";
title: string = "I am a custom component!";
constructor(tabs: ParentComponent, tabsService: TabsService) {
super(tabs, tabsService);
}
...
}
Note:
host: {
'[style.display]': 'active ? "block" : "none"'
}
This is one of multiple approaches!
You could also give it a class with ngClass directive, which
allows CSS transitions or implement @angular/animations directly into the class.
Although there is also the good ol' *ngIf directive.
Future Possibilities
- Time travel through states
- ...
Any suggestions? Contact me or collaborate!
Send an e-mail to:
a.butkereit@gmail.com
Demo
- Fork the git repository and clone it with:
$ git clone https://github.com/Stejnar/stejnar-tabs.git
- Start the build process and go to localhost:
$ cd stejnar-tabs-master $ npm install $ npm run build:example $ npm start