import { ChangeDetectorRef , Component , ComponentFactoryResolver , ComponentRef , ElementRef , ErrorHandler , EventEmitter , Input , NgZone , Optional , Output , Renderer , ViewChild , ViewContainerRef , ViewEncapsulation } from '@angular/core' ; import { App } from '../app/app' ; import { Config } from '../../config/config' ; import { DeepLinker } from '../../navigation/deep-linker' ; import { DomController } from '../../platform/dom-controller' ; import { GestureController } from '../../gestures/gesture-controller' ; import { isTrueProperty } from '../../util/util' ; import { Tab as ITab } from '../../navigation/nav-interfaces' ; import { NavControllerBase } from '../../navigation/nav-controller-base' ; import { NavOptions , NavSegment } from '../../navigation/nav-util' ; import { Platform } from '../../platform/platform' ; import { TabButton } from './tab-button' ; import { Tabs } from './tabs' ; import { TransitionController } from '../../transitions/transition-controller' ; import { ViewController } from '../../navigation/view-controller' ; name description usage demo see {@link /docs/components#tabs Tabs Component Docs} see {@link ../../tabs/Tabs Tabs API Docs} see {@link ../../nav/Nav Nav API Docs} see {@link ../../nav/NavController NavController API Docs} @ Component ( { selector : 'ion-tab' , template : '<div #viewport></div><div class="nav-decor"></div>' , host : { '[attr.id]' : '_tabId' , '[attr.aria-labelledby]' : '_btnId' , 'role' : 'tabpanel' } , encapsulation : ViewEncapsulation . None , } ) export class Tab extends NavControllerBase implements ITab { hidden _isInitial : boolean ; hidden _isEnabled : boolean = true ; hidden _isShown : boolean = true ; hidden _tabId : string ; hidden _btnId : string ; hidden _loaded : boolean ; hidden isSelected : boolean ; hidden btn : TabButton ; hidden _tabsHideOnSubPages : boolean ; hidden _segment : NavSegment ; input @ Input ( ) root : any ; input @ Input ( ) rootParams : any ; input @ Input ( ) tabUrlPath : string ; input @ Input ( ) tabTitle : string ; input @ Input ( ) tabIcon : string ; input @ Input ( ) tabBadge : string ; input @ Input ( ) tabBadgeStyle : string ; input @ Input ( ) get enabled ( ) : boolean { return this . _isEnabled ; } set enabled ( val ) { this . _isEnabled = isTrueProperty ( val ) ; } input @ Input ( ) get show ( ) : boolean { return this . _isShown ; } set show ( val ) { this . _isShown = isTrueProperty ( val ) ; } input @ Input ( ) get tabsHideOnSubPages ( ) : boolean { return this . _tabsHideOnSubPages ; } set tabsHideOnSubPages ( val ) { this . _tabsHideOnSubPages = isTrueProperty ( val ) ; } output @ Output ( ) ionSelect : EventEmitter < Tab > = new EventEmitter < Tab > ( ) ; constructor ( parent , app , config , plt , elementRef , zone , renderer , cfr , private _cd , gestureCtrl , transCtrl , @ Optional ( ) private linker , private _dom , errHandler ) { super ( parent , app , config , plt , elementRef , zone , renderer , cfr , gestureCtrl , transCtrl , linker , _dom , errHandler ) ; this . id = parent . add ( this ) ; this . _tabsHideOnSubPages = config . getBoolean ( 'tabsHideOnSubPages' ) ; this . _tabId = 'tabpanel-' + this . id ; this . _btnId = 'tab-' + this . id ; } hidden @ ViewChild ( 'viewport' , { read : ViewContainerRef } ) set _vp ( val ) { this . setViewport ( val ) ; } hidden ngOnInit ( ) { this . tabBadgeStyle = this . tabBadgeStyle ? this . tabBadgeStyle : 'default' ; } hidden load ( opts ) { const segment = this . _segment ; if ( segment || ( ! this . _loaded && this . root ) ) { this . setElementClass ( 'show-tab' , true ) ; const nameToUse = segment && segment . name ? segment . name : this . root ; const dataToUse = segment ? segment . data : this . rootParams ; const numViews = this . length ( ) - 1 ; for ( let i = numViews ; i >= 0 ; i -- ) { const viewController = this . getByIndex ( i ) ; if ( viewController && ( viewController . id === nameToUse || viewController . component === nameToUse ) ) { if ( i === numViews ) { return Promise . resolve ( ) ; } else { return this . popTo ( viewController , { animate : false , updateUrl : false , } ) ; } } } let promise = null ; if ( segment && segment . defaultHistory && segment . defaultHistory . length && this . _views . length === 0 ) { promise = this . linker . initViews ( segment ) . then ( ( views ) => { return this . setPages ( views , opts ) ; } ) ; } else { promise = this . push ( nameToUse , dataToUse , opts ) ; } return promise . then ( ( ) => { this . _segment = null ; this . _loaded = true ; } ) ; } else { this . _dom . read ( ( ) => { this . resize ( ) ; } ) ; return Promise . resolve ( ) ; } } hidden resize ( ) { const active = this . getActive ( ) ; if ( ! active ) { return ; } const content = active . getIONContent ( ) ; content && content . resize ( ) ; } hidden _viewAttachToDOM ( viewCtrl , componentRef , viewport ) { const isTabSubPage = ( this . _tabsHideOnSubPages && viewCtrl . index > 0 ) ; if ( isTabSubPage ) { viewport = this . parent . portal ; } super . _viewAttachToDOM ( viewCtrl , componentRef , viewport ) ; if ( isTabSubPage ) { const pageEleRef = viewCtrl . pageRef ( ) ; if ( pageEleRef ) { this . _renderer . setElementClass ( pageEleRef . nativeElement , 'tab-subpage' , true ) ; } } } hidden setSelected ( isSelected ) { this . isSelected = isSelected ; this . setElementClass ( 'show-tab' , isSelected ) ; this . setElementAttribute ( 'aria-hidden' , ( ! isSelected ) . toString ( ) ) ; if ( isSelected ) { this . _cd . reattach ( ) ; } else { this . _cd . detach ( ) ; } } hidden get index ( ) : number { return this . parent . getIndex ( this ) ; } hidden updateHref ( component , data ) { if ( this . btn && this . linker ) { let href = this . linker . createUrl ( this . parent , component , data ) || '#' ; this . btn . updateHref ( href ) ; } } hidden ngOnDestroy ( ) { this . destroy ( ) ; } hidden getType ( ) { return 'tab' ; } goToRoot ( opts ) { return this . setRoot ( this . root , this . rootParams , opts , null ) ; } }