diff --git a/ionic/components/tabs/tab-button.ts b/ionic/components/tabs/tab-button.ts index bf8a1e4341..2f632700f9 100644 --- a/ionic/components/tabs/tab-button.ts +++ b/ionic/components/tabs/tab-button.ts @@ -18,6 +18,7 @@ import {Config} from '../../config/config'; '[class.has-icon]': 'hasIcon', '[class.has-title-only]': 'hasTitleOnly', '[class.icon-only]': 'hasIconOnly', + '[class.has-badge]': 'hasBadge', '[class.disable-hover]': 'disHover' } }) @@ -27,6 +28,7 @@ export class TabButton extends Ion { private hasIcon: boolean; private hasTitleOnly: boolean; private hasIconOnly: boolean; + private hasBadge: boolean; @Input() tab: Tab; @Output() select: EventEmitter = new EventEmitter(); @@ -42,10 +44,11 @@ export class TabButton extends Ion { this.hasIcon = !!this.tab.tabIcon; this.hasTitleOnly = (this.hasTitle && !this.hasIcon); this.hasIconOnly = (this.hasIcon && !this.hasTitle); + this.hasBadge = !!this.tab.tabBadge; } @HostListener('click') private onClick() { this.select.emit(this.tab); } -} \ No newline at end of file +} diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 8dd0f131ea..af5ce90c35 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -103,6 +103,7 @@ export class Tab extends NavController { @Input() root: Type; @Input() tabTitle: string; @Input() tabIcon: string; + @Input() tabBadge: string; @Output() select: EventEmitter = new EventEmitter(); constructor( diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 2da72784a4..535ae3d866 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -136,3 +136,27 @@ tab-highlight { [tabbarIcons=hide] .tab-button-icon { display: none; } + +// Tab Badges +// -------------------------------------------------- + +.tab-badge { + position: absolute; + top: 4%; + right: 4%; + right: calc(50% - 50px); + padding: 1px 6px; + height: auto; + font-size: 12px; + line-height: 16px; +} + +.has-icon .tab-badge { + right: calc(50% - 30px); +} + +[tabbarIcons=bottom] .tab-badge, +[tabbarIcons=left] .tab-badge, +[tabbarIcons=right] .tab-badge { + right: calc(50% - 50px); +} diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 5e03a74a8d..c54cf8957c 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -48,6 +48,7 @@ import {isUndefined} from '../../util/util'; '' + '' + '{{t.tabTitle}}' + + '{{t.tabBadge}}' + '' + '' + '' + diff --git a/ionic/components/tabs/test/badges/index.ts b/ionic/components/tabs/test/badges/index.ts new file mode 100644 index 0000000000..834efa41bb --- /dev/null +++ b/ionic/components/tabs/test/badges/index.ts @@ -0,0 +1,9 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} + +document.body.innerHTML += '' diff --git a/ionic/components/tabs/test/badges/main.html b/ionic/components/tabs/test/badges/main.html new file mode 100644 index 0000000000..6c9873f2e2 --- /dev/null +++ b/ionic/components/tabs/test/badges/main.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/tabs/test/badges/styles.css b/ionic/components/tabs/test/badges/styles.css new file mode 100644 index 0000000000..b5b6cbf640 --- /dev/null +++ b/ionic/components/tabs/test/badges/styles.css @@ -0,0 +1,12 @@ + +ion-tabs { + position: relative; + top: auto; + height: auto; + margin-bottom: 20px; +} + +ion-navbar-section, +ion-content-section { + display: none !important; +} diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html index 3414bd47a7..3cd9811455 100644 --- a/ionic/components/tabs/test/tab-bar-scenarios/main.html +++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html @@ -46,6 +46,7 @@ + @@ -53,6 +54,7 @@ + @@ -62,7 +64,7 @@ - +