diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 06bfc6456f..4d4181e758 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -58,6 +58,7 @@ export class TabHeadingDirective {}
- `active` (`?boolean=false`) - if tab is active equals true, or set `true` to activate tab
- `disabled` (`?boolean=false`) - if `true` tab can not be activated
- `removable` (`?boolean=false`) - if `true` tab can be removable, additional button will appear
+ - `customClass` (`?string`) - if set, will be added to the tab's class atribute
### Tab events
- `select` - fired when `tab` became active, `$event:Tab` equals to selected instance of `Tab` component
diff --git a/components/tabs/tab.directive.ts b/components/tabs/tab.directive.ts
index b20530b21a..5e73c2db06 100644
--- a/components/tabs/tab.directive.ts
+++ b/components/tabs/tab.directive.ts
@@ -11,6 +11,7 @@ export class TabDirective implements OnDestroy {
@Input() public heading:string;
@Input() public disabled:boolean;
@Input() public removable:boolean;
+ @Input() public customClass:string;
/** tab active state toggle */
@HostBinding('class.active')
diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
index e79301a307..36e228260e 100644
--- a/components/tabs/tabset.component.ts
+++ b/components/tabs/tabset.component.ts
@@ -7,9 +7,9 @@ import { TabDirective } from './tab.directive';
selector: 'tabset',
template: `
- -
-
{{tabz.heading}}
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index f815679acb..e2bbd8dd0a 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -607,4 +607,11 @@ pre {
/* Hide arrow */
.tooltip.customClass .tooltip-arrow {
display: none;
+}
+
+.nav-item.customClass {
+ float: right;
+}
+.nav-item.customClass a {
+ background-color: #50ff50;
}
\ No newline at end of file
diff --git a/demo/components/tabs/tabs-demo.html b/demo/components/tabs/tabs-demo.html
index de79c0c3d4..7ab0568f81 100644
--- a/demo/components/tabs/tabs-demo.html
+++ b/demo/components/tabs/tabs-demo.html
@@ -17,7 +17,8 @@
(deselect)="tabz.active = false"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
- (removed)="removeTabHandler(tabz)">
+ (removed)="removeTabHandler(tabz)"
+ [customClass]="tabz.customClass">
{{tabz?.content}}
diff --git a/demo/components/tabs/tabs-demo.ts b/demo/components/tabs/tabs-demo.ts
index 42c0fe077c..33e4581936 100644
--- a/demo/components/tabs/tabs-demo.ts
+++ b/demo/components/tabs/tabs-demo.ts
@@ -12,7 +12,8 @@ export class TabsDemoComponent {
public tabs:Array = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
- {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}
+ {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true},
+ {title: 'Dynamic Title 4', content: 'Dynamic content 4', customClass: 'customClass'}
];
public alertMe():void {
diff --git a/package.json b/package.json
index 4f13d7590a..5d52a97f45 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
"systemjs-builder": "0.15.31",
"tslint-config-valorsoft": "1.1.1",
"typedoc": "0.4.5",
- "typescript": "2.0.2",
+ "typescript": "2.0.3",
"zone.js": "0.6.23"
}
}