1.1.5 • Published 5 years ago
ng-smart-tabs v1.1.5
Ng Smart Tabs
created by Andrew Wormald
Installation:
Step 1:
npm install ng-smart-tabs
Step 2:
Ensure you are using routing as this directive works hand in hand with Agnular's Router.
import { NgSmartTabsModule } from 'ng-smart-tabs';
@NgModule({
imports: [
NgSmartTabsModule,
],
})
Step 3:
<a ng-smart-tab>{{YOUR_TEXT}}</a>
Attribute | Default | Tpe |
---|---|---|
lineColor | '#EF476F' | string |
lineThickness | '1px' | string |
lineBorderRadius | '0px' | string |
isFollowLineInvisible | false | boolean |
activeOnUrlMatch | null | string |
underlineSidePadding | 0 | number |
horizontalChangeSpeed | '1' | string |
verticalChangeSpeed | '1' | string |
opacityChangeSpeed | '1.25' | string |
widthChangeSpeed | '0.35s' | string |
zIndex | 1 | number |
For example:
<a ng-smart-tab
activeOnUrlMatch="/path">{{YOUR_TEXT}}</a>
<!-- The matching alogithim is a basic javascipt .contains()
method and priorities direct matches. Thus only provide
what is unique for that url/journey. -->
<a ng-smart-tab
activeOnUrlMatch="/path/">{{YOUR_TEXT}}</a>
<a ng-smart-tab
opacityChangeSpeed="2.35">{{YOUR_TEXT}}</a>
<a ng-smart-tab
lineColor="#eee">{{YOUR_TEXT}}</a>