import { ContentChildren , Directive , ElementRef , QueryList , Renderer } from '@angular/core' ; import { Config } from '../../config/config' ; import { isTrueProperty } from '../../util/util' ; import { Platform } from '../../platform/platform' ; import { FabButton } from './fab' ; name description usage module demo see {@link /docs/components#fab Fab Component Docs} @ Directive ( { selector : 'ion-fab-list' , } ) export class FabList { _visible : boolean = false ; _fabs : FabButton [ ] = [ ] ; _mode : string ; constructor ( private _elementRef , private _renderer , config , private _plt ) { this . _mode = config . get ( 'mode' ) ; } @ ContentChildren ( FabButton ) set _setbuttons ( query ) { const fabs = this . _fabs = query . toArray ( ) ; const className = `fab-${ this . _mode }-in-list` ; for ( var fab of fabs ) { fab . setElementClass ( 'fab-in-list' , true ) ; fab . setElementClass ( className , true ) ; } } hidden setVisible ( val ) { let visible = isTrueProperty ( val ) ; if ( visible === this . _visible ) { return ; } this . _visible = visible ; let fabs = this . _fabs ; let i = 1 ; if ( visible ) { fabs . forEach ( fab => { this . _plt . timeout ( ( ) => fab . setElementClass ( 'show' , true ) , i * 30 ) ; i ++ ; } ) ; } else { fabs . forEach ( fab => fab . setElementClass ( 'show' , false ) ) ; } this . setElementClass ( 'fab-list-active' , visible ) ; } internal setElementClass ( className , add ) { this . _renderer . setElementClass ( this . _elementRef . nativeElement , className , add ) ; } }