{"id":16298079,"url":"https://github.com/maximelafarie/ngx-tabset","last_synced_at":"2025-12-30T11:49:48.000Z","repository":{"id":38781723,"uuid":"99144952","full_name":"maximelafarie/ngx-tabset","owner":"maximelafarie","description":"A very simple library to let you create some tabs","archived":false,"fork":false,"pushed_at":"2023-01-05T00:26:31.000Z","size":3913,"stargazers_count":19,"open_issues_count":47,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-14T15:05:16.703Z","etag":null,"topics":["angular","angular2","hacktoberfest","javascript","tab","tabs","typescript"],"latest_commit_sha":null,"homepage":"https://maximelafarie.com/ngx-tabset/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maximelafarie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-02T17:42:30.000Z","updated_at":"2023-02-22T23:31:45.000Z","dependencies_parsed_at":"2023-02-03T01:15:58.506Z","dependency_job_id":null,"html_url":"https://github.com/maximelafarie/ngx-tabset","commit_stats":null,"previous_names":["biig-io/ngx-tabset"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-tabset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-tabset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-tabset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-tabset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximelafarie","download_url":"https://codeload.github.com/maximelafarie/ngx-tabset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056342,"owners_count":20390719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","hacktoberfest","javascript","tab","tabs","typescript"],"created_at":"2024-10-10T20:43:30.929Z","updated_at":"2025-12-30T11:49:47.975Z","avatar_url":"https://github.com/maximelafarie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://user-images.githubusercontent.com/5319267/28922057-f0d471fa-7858-11e7-8478-010657fd0e60.png)\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/maximelafarie/ngx-tabset.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/maximelafarie/ngx-tabset.svg?branch=master)](https://travis-ci.org/maximelafarie/ngx-tabset) [![npm version](https://badge.fury.io/js/ngx-tabset.svg)](https://badge.fury.io/js/ngx-tabset) [![npm downloads](https://img.shields.io/npm/dm/ngx-tabset.svg)](https://npmjs.org/ngx-tabset) [![codecov](https://codecov.io/gh/maximelafarie/ngx-tabset/branch/master/graph/badge.svg)](https://codecov.io/gh/maximelafarie/ngx-tabset)\n\n`ngx-tabset` is a very simple library to let you create some tabs. It uses flex-box and is compatible with Angular \u003e=2.0.0.\n\n## Demo\nhttps://maximelafarie.com/ngx-tabset/\n\n**This library doesn't use any framework (no CSS library, no JQuery...)**\n\n## Setup\nTo use `ngx-tabset` in your project install it via [npm](https://www.npmjs.com/package/ngx-tabset) / [yarn](https://yarnpkg.com/fr/package/ngx-tabset):\n```\nnpm i ngx-tabset --save\n```\nor\n```\nyarn add ngx-tabset\n```\n\nIf you are using system.js you may want to add this into your config:\n\n```json\nSystem.config({\n    \"map\": {\n        \"ngx-tabset\": \"node_modules/ngx-tabset/bundles/ngx-tabset.umd.js\"\n    }\n});\n```\n\n## Usage\n\nImport `TabsModule` in your app module and start using it in any component:\n```typescript\nimport {CommonModule} from '@angular/common';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {NgModule} from '@angular/core';\n\nimport {AppComponent} from './app.component';\nimport {TabsModule} from 'ngx-tabset';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    CommonModule,\n    TabsModule.forRoot()\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nAnd import `ngx-tabset.scss` or `ngx-tabset.css` in a global style file (e.g. `styles.scss` or `styles.css` in classic Angular projects or any other scss/css file it imports):\nExample with **styles.scss**:\n```\n/* You can add global styles to this file, and also import other style files */\n@import \"~ngx-tabset/ngx-tabset\";\n@import \"app/app.component\";\n...\n```\n[Demo example here](https://maximelafarie.com/ngx-tabset/blob/master/src/styles.scss)\n\n### Basic example\n```html\n\u003cngx-tabset customNavClass=\"nav-test-class\" customTabsClass=\"container\"\u003e\n  \u003cngx-tab tabTitle=\"About me\" tabSubTitle=\"a little subtitle\"\u003e\n    Its all about me.\n  \u003c/ngx-tab\u003e\n  \u003cngx-tab tabTitle=\"Contacts\" tabSubTitle=\"my contacts\" [bypassDOM]=\"true\"\u003e\n    \u003cng-template\u003e\n      This is content of the contacts tab\n    \u003c/ng-template\u003e\n  \u003c/ngx-tab\u003e\n  \u003cngx-tab tabTitle=\"Map\" tabSubTitle=\"i'm disabled\" [disabled]=\"true\"\u003e\n    Content of the Map Tab\n  \u003c/ngx-tab\u003e\n\u003c/ngx-tabset\u003e\n```\n\n### Content projection example\n```html\n\u003cngx-tabset [disableStyle]=\"true\" (onSelect)=\"doSomethingOnTabSelect($event)\"\u003e\n    \u003cngx-tab tabTitle=\"Tab title\" [active]=\"true\" [bypassDOM]=\"true\"\u003e\n        \u003cng-template\u003e\n          \u003capp-my-component\u003e\u003c/app-my-component\u003e\n        \u003c/ng-template\u003e\n    \u003c/ngx-tab\u003e\n    ...\n\u003c/ngx-tabset\u003e\n```\n\n* `\u003cngx-tabset\u003e` is a container for all tabs\n    * `[disableStyle]=\"true|false\"` Disables/enables the built-in style. It allows you to style the entire tab yourself\n    * `(onSelect)=\"doSomethingOnTabSelect($event)\"` Callback to be called when tab is being selected. It returns the index of the selected tab into tabset collection.\n* `\u003cngx-tab\u003e` is a single tab item\n    * `tabTitle` The tab title\n    * `tabSubTitle` The tab subtitle\n    * `[disabled]=\"true|false` Indicates if current tab is enabled or disabled\n    * `[active]=\"true|false\"` Specifies which tab should be active on init. By default the first tab will be active.\n\n\n## Style\n⚠️ **For `ngx-tabset` \u003e= 2.0.0 only!**\n`ngx-tabset` provides built-in [SCSS variables](https://sass-lang.com/guide#topic-2) that you can override easily like it (assuming you imported `ngx-tabset.scss` as explained above):\n```\n/* You can add global styles to this file, and also import other style files */\n/* NgxTabset variables override */\n$active-tab-color: rgba(0, 0, 0, .7);\n$nav-tab-padding: 20px;\n\n@import \"~ngx-tabset/ngx-tabset\";\n...\n```\n\n### Available SCSS variables\nThe below documentation will use the following pattern:\n\u003e `parameter/option name` (type) | default value | _description_\n\n- `$active-tab-color` (hex / rgb / rgba) | `red` ― _Modifies the border color of the active tab_\n\n- `$default-tab-border` ([border](https://developer.mozilla.org/fr/docs/Web/CSS/border)) | `solid 1px transparent` ― _Modifies tab's default border style_\n\n- `$nav-tab-padding` (px / % / ...) | `10px` ― _Defines the nav tabs padding_\n\n- `$disabled-tab-opacity` (0 - 1) | `.5` ― _The nav tab opacity of disabled tabs_\n\n- `$tab-cursor` ([cursor](https://developer.mozilla.org/fr/docs/Web/CSS/cursor)) | `pointer` ― _Defines the cursor type for tabs that aren't disabled or active._\n\n- `$tab-border-transition-duration` (duration) | `200ms` ― _The animation duration. You can use any duration unit you want_\n\n- `$tab-border-transition-timing-function` (transition-timing-function Property) | `ease-in-out` ― _Specifies the speed curve of the transition effect ([available speed curves here](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp))_\n\n\n## Customization options\n`ngx-tabset` comes with several options in order to facilitate integration (with CSS frameworks, custom style, etc.).\n\nThe below documentation will use the following pattern:\n\u003e `parameter/option name` (type) | default value | required? ― _description_\n\n- `disableStyle` (boolean) | `false` ― _Enable / disable default tabset style. E.g.: it's useful if you want to keep the provided style on some tabs and disable it on others_\n\n- `bypassDOM` (boolean) | `false` ― _Option to allow the tab to trigger lifecycle events to the wrapped content, e.g. for wrapped components. You need to surround tab content with `\u003cng-template\u003e...\u003c/ng-template\u003e` in order to make it work. Please check the [above example](https://maximelafarie.com/ngx-tabset#more-complete-example) for full implementation_\n\n- `customNavClass` (string) | `''` ― _All the additionnal classes you want to add to the tabset **header / nav**. You can add several classes by giving a string with space-separated classnames_\n\n- `customTabsClass` (string) | `''` ― _All the additionnal classes you want to add to the tabset **container**. You can add several classes by giving a string with space-separated classnames_\n\n- `customPaneClass` (string) | `''` ― _All the additionnal classes you want to add to **each** tab pane. You can add several classes by giving a string with space-separated classnames_\n\n## Issues\nIf you wish to submit an issue, please use the available template to facilitate reading and comprehension of all issues encountered. You can find this template in `./github/issue_template.md`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximelafarie%2Fngx-tabset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximelafarie%2Fngx-tabset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximelafarie%2Fngx-tabset/lists"}