Skip to content
This repository has been archived by the owner. It is now read-only.
Simple tabs control for your angular2 applications using bootstrap3
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources
sample/sample1-simple-usage
src
.gitignore
README.md
gulpfile.js
gulpfile.ts
package.json
tsconfig-aot.json
tsconfig.json
tslint.json

README.md

This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.

ngx-tabs

Simple tabs control for your angular2 applications using bootstrap3. Does not depend of jquery. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

Installation

  1. Install npm module:

    npm install ngx-tabs --save

  2. If you are using system.js you may want to add this into map and package config:

    {
        "map": {
            "ngx-tabs": "node_modules/ngx-tabs"
        },
        "packages": {
            "ngx-tabs": { "main": "index.js", "defaultExtension": "js" }
        }
    }

Usage

Import TabsModule in your app and start using a component:

<tabset [pills]="false" (onSelect)="doSomethingOnTabSelect($event)">
    <tab title="Tab title" [disabled]="false" [active]="true">
        <span *tabHeading>
            <b style="color: deepskyblue">Dynamic html</b> <i style="color: deeppink">tab heading</i>
        </span>
        Tab contents.
    </tab>
    ...
</tabset>
  • <tabset> is a container for all tabs
    • [pills]="true|false" Specifies if bootstrap pills should be used instead of regular tabs
    • (onSelect)="doSomethingOnTabSelect($event)" Callback to be called when tab is being selected
  • <tab> is a single tab item
    • title Simple tab title
    • [disabled]="true|false Indicates if current tab is enabled or disabled
    • <span *tabHeading>...</span> Allows to specify dynamic html content of the tab title
    • [active]="true|false" Specifies which tab should be active on init. By deafult the first tab will be active

Sample

import {Component} from "@angular/core";
import {TabsModule} from "ngx-tabs";

@Component({
    selector: "app",
    template: `
<div class="container">

    <!-- regular tabs -->
    <tabset>
        <tab title="About me">
            Its all about me.
        </tab>
        <tab title="Contacts">
            This is content of the contacts tab
        </tab>
        <tab title="Map" [disabled]="true">
            Content of the Map Tab
        </tab>
    </tabset>
    
    <br/><br/>
    
    <!-- tabs with custom heading templates -->
    <tabset>
        <tab>
            <span *tabHeading>
                <b style="color: deepskyblue">About</b> <i style="color: deeppink">me</i>
            </span>
            Its all about me.
        </tab>
        <tab>
            <span *tabHeading>
                <i style="color: deeppink">My</i> <b style="color: deepskyblue">contacts</b>
            </span>
            This is content of the contacts tab
        </tab>
        <tab title="Map">
            Content of the Map Tab
        </tab>
    </tabset>
    
    <br/><br/>
    
    <!-- pills tabs -->
    <tabset [pills]="true">
        <tab title="About me">
            Its all about me.
        </tab>
        <tab title="Contacts">
            This is content of the contacts tab
        </tab>
        <tab title="Map">
            Content of the Map Tab
        </tab>
    </tabset>

</div>
`
})
export class App {

}

@NgModule({
    imports: [
        // ...
        TabsModule
    ],
    declarations: [
        App
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {

}

Take a look on samples in ./sample for more examples of usages.

You can’t perform that action at this time.