fab-list.js 2.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import { ContentChildren, Directive, ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { isTrueProperty } from '../../util/util';
  4. import { Platform } from '../../platform/platform';
  5. import { FabButton } from './fab';
  6. /**
  7. * @name FabList
  8. * @description
  9. * `ion-fab-list` is a container for multiple FAB buttons. They are components of `ion-fab` and allow you to specificy the buttons position, left, right, top, bottom.
  10. * @usage
  11. *
  12. * ```html
  13. * <ion-fab bottom right >
  14. * <button ion-fab>Share</button>
  15. * <ion-fab-list side="top">
  16. * <button ion-fab>Facebook</button>
  17. * <button ion-fab>Twitter</button>
  18. * <button ion-fab>Youtube</button>
  19. * </ion-fab-list>
  20. * <ion-fab-list side="left">
  21. * <button ion-fab>Vimeo</button>
  22. * </ion-fab-list>
  23. * </ion-fab>
  24. * ```
  25. * @module ionic
  26. *
  27. * @demo /docs/demos/src/fab/
  28. * @see {@link /docs/components#fab Fab Component Docs}
  29. */
  30. export class FabList {
  31. constructor(_elementRef, _renderer, config, _plt) {
  32. this._elementRef = _elementRef;
  33. this._renderer = _renderer;
  34. this._plt = _plt;
  35. this._visible = false;
  36. this._fabs = [];
  37. this._mode = config.get('mode');
  38. }
  39. set _setbuttons(query) {
  40. const fabs = this._fabs = query.toArray();
  41. const className = `fab-${this._mode}-in-list`;
  42. for (var fab of fabs) {
  43. fab.setElementClass('fab-in-list', true);
  44. fab.setElementClass(className, true);
  45. }
  46. }
  47. /**
  48. * @hidden
  49. */
  50. setVisible(val) {
  51. let visible = isTrueProperty(val);
  52. if (visible === this._visible) {
  53. return;
  54. }
  55. this._visible = visible;
  56. let fabs = this._fabs;
  57. let i = 1;
  58. if (visible) {
  59. fabs.forEach(fab => {
  60. this._plt.timeout(() => fab.setElementClass('show', true), i * 30);
  61. i++;
  62. });
  63. }
  64. else {
  65. fabs.forEach(fab => fab.setElementClass('show', false));
  66. }
  67. this.setElementClass('fab-list-active', visible);
  68. }
  69. /**
  70. * @internal
  71. */
  72. setElementClass(className, add) {
  73. this._renderer.setElementClass(this._elementRef.nativeElement, className, add);
  74. }
  75. }
  76. FabList.decorators = [
  77. { type: Directive, args: [{
  78. selector: 'ion-fab-list',
  79. },] },
  80. ];
  81. /** @nocollapse */
  82. FabList.ctorParameters = () => [
  83. { type: ElementRef, },
  84. { type: Renderer, },
  85. { type: Config, },
  86. { type: Platform, },
  87. ];
  88. FabList.propDecorators = {
  89. '_setbuttons': [{ type: ContentChildren, args: [FabButton,] },],
  90. };
  91. //# sourceMappingURL=fab-list.js.map