KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

ngx-tabs

★ 36 Open GitHub ↗

Simple tabs control for your angular2 applications using bootstrap3

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> 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:
    
    ```json
    {
        "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:

```html
<tabset [pills]="false" (onSelect)="doSomethingOnTabSelect($event)">
 <tab title="Tab title" [disabled]="false" [active]="true">
 
 Dynamic html tab heading
 
 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
 * `...` 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

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

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

<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>
 
 
 
 
 <tabset>
 <tab>
 
 About me
 
 Its all about me.
 </tab>
 <tab>
 
 My contacts
 
 This is content of the contacts tab
 </tab>
 <tab title="Map">
 Content of the Map Tab
 </tab>
 </tabset>
 
 
 
 
 <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](https://github.com/pleerock/ngx-tabs/tree/master/sample) for more examples of
usages.

ngx-tabs

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README