https://github.com/maximelafarie/ngx-tabset
A very simple library to let you create some tabs
https://github.com/maximelafarie/ngx-tabset
angular angular2 hacktoberfest javascript tab tabs typescript
Last synced: 6 months ago
JSON representation
A very simple library to let you create some tabs
- Host: GitHub
- URL: https://github.com/maximelafarie/ngx-tabset
- Owner: maximelafarie
- License: mit
- Created: 2017-08-02T17:42:30.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:26:31.000Z (over 3 years ago)
- Last Synced: 2025-03-14T15:05:16.703Z (over 1 year ago)
- Topics: angular, angular2, hacktoberfest, javascript, tab, tabs, typescript
- Language: TypeScript
- Homepage: https://maximelafarie.com/ngx-tabset/
- Size: 3.73 MB
- Stars: 19
- Watchers: 3
- Forks: 9
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://greenkeeper.io/)
[](https://travis-ci.org/maximelafarie/ngx-tabset) [](https://badge.fury.io/js/ngx-tabset) [](https://npmjs.org/ngx-tabset) [](https://codecov.io/gh/maximelafarie/ngx-tabset)
`ngx-tabset` is a very simple library to let you create some tabs. It uses flex-box and is compatible with Angular >=2.0.0.
## Demo
https://maximelafarie.com/ngx-tabset/
**This library doesn't use any framework (no CSS library, no JQuery...)**
## Setup
To 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):
```
npm i ngx-tabset --save
```
or
```
yarn add ngx-tabset
```
If you are using system.js you may want to add this into your config:
```json
System.config({
"map": {
"ngx-tabset": "node_modules/ngx-tabset/bundles/ngx-tabset.umd.js"
}
});
```
## Usage
Import `TabsModule` in your app module and start using it in any component:
```typescript
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {TabsModule} from 'ngx-tabset';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
TabsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
And 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):
Example with **styles.scss**:
```
/* You can add global styles to this file, and also import other style files */
@import "~ngx-tabset/ngx-tabset";
@import "app/app.component";
...
```
[Demo example here](https://maximelafarie.com/ngx-tabset/blob/master/src/styles.scss)
### Basic example
```html
Its all about me.
This is content of the contacts tab
Content of the Map Tab
```
### Content projection example
```html
...
```
* `` is a container for all tabs
* `[disableStyle]="true|false"` Disables/enables the built-in style. It allows you to style the entire tab yourself
* `(onSelect)="doSomethingOnTabSelect($event)"` Callback to be called when tab is being selected. It returns the index of the selected tab into tabset collection.
* `` is a single tab item
* `tabTitle` The tab title
* `tabSubTitle` The tab subtitle
* `[disabled]="true|false` Indicates if current tab is enabled or disabled
* `[active]="true|false"` Specifies which tab should be active on init. By default the first tab will be active.
## Style
⚠️ **For `ngx-tabset` >= 2.0.0 only!**
`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):
```
/* You can add global styles to this file, and also import other style files */
/* NgxTabset variables override */
$active-tab-color: rgba(0, 0, 0, .7);
$nav-tab-padding: 20px;
@import "~ngx-tabset/ngx-tabset";
...
```
### Available SCSS variables
The below documentation will use the following pattern:
> `parameter/option name` (type) | default value | _description_
- `$active-tab-color` (hex / rgb / rgba) | `red` ― _Modifies the border color of the active tab_
- `$default-tab-border` ([border](https://developer.mozilla.org/fr/docs/Web/CSS/border)) | `solid 1px transparent` ― _Modifies tab's default border style_
- `$nav-tab-padding` (px / % / ...) | `10px` ― _Defines the nav tabs padding_
- `$disabled-tab-opacity` (0 - 1) | `.5` ― _The nav tab opacity of disabled tabs_
- `$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._
- `$tab-border-transition-duration` (duration) | `200ms` ― _The animation duration. You can use any duration unit you want_
- `$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))_
## Customization options
`ngx-tabset` comes with several options in order to facilitate integration (with CSS frameworks, custom style, etc.).
The below documentation will use the following pattern:
> `parameter/option name` (type) | default value | required? ― _description_
- `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_
- `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 `...` in order to make it work. Please check the [above example](https://maximelafarie.com/ngx-tabset#more-complete-example) for full implementation_
- `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_
- `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_
- `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_
## Issues
If 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`.