fab.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import { ChangeDetectionStrategy, Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { Ion } from '../ion';
  4. /**
  5. * @name FabButton
  6. * @module ionic
  7. *
  8. * @description
  9. * FABs (Floating Action Buttons) are standard material design components. They are shaped as a circle that represents a promoted action. When pressed, it may contain more related actions.
  10. * FABs as its name suggests are floating over the content in a fixed position. This is not achieved exclusively with `<button ion-fab>Button</button>` but it has to wrapped with the `<ion-fab>` component, like this:
  11. *
  12. * ```html
  13. * <ion-content>
  14. * <!-- Real floating action button, fixed. It will not scroll with the content -->
  15. * <ion-fab>
  16. * <button ion-fab>Button</button>
  17. * </ion-fab>
  18. *
  19. * <!-- Button shaped as a circle that just like a normal button scrolls with the content -->
  20. * <button ion-fab>Button</button>
  21. * </ion-content>
  22. *
  23. * ```
  24. *
  25. * In case the button is not wrapped with `<ion-fab>`, the fab button will behave like a normal button, scrolling with the content.
  26. *
  27. * See [ion-fab] to learn more information about how to position the fab button.
  28. *
  29. * @property [mini] - Makes a fab button with a reduced size.
  30. *
  31. * @usage
  32. *
  33. * ```html
  34. *
  35. * <!-- Colors -->
  36. * <ion-fab>
  37. * <button ion-fab color="primary">Button</button>
  38. * </ion-fab>
  39. *
  40. * <!-- Mini -->
  41. * <ion-fab>
  42. * <button ion-fab mini>Small</button>
  43. * </ion-fab>
  44. * ```
  45. *
  46. * @demo /docs/demos/src/fab/
  47. * @see {@link /docs/components#fabs FAB Component Docs}
  48. */
  49. export class FabButton extends Ion {
  50. constructor(config, elementRef, renderer) {
  51. super(config, elementRef, renderer, 'fab');
  52. }
  53. /**
  54. * @hidden
  55. */
  56. setActiveClose(closeVisible) {
  57. this.setElementClass('fab-close-active', closeVisible);
  58. }
  59. }
  60. FabButton.decorators = [
  61. { type: Component, args: [{
  62. selector: '[ion-fab]',
  63. template: '<ion-icon name="close" class="fab-close-icon"></ion-icon>' +
  64. '<span class="button-inner">' +
  65. '<ng-content></ng-content>' +
  66. '</span>' +
  67. '<div class="button-effect"></div>',
  68. changeDetection: ChangeDetectionStrategy.OnPush,
  69. encapsulation: ViewEncapsulation.None,
  70. },] },
  71. ];
  72. /** @nocollapse */
  73. FabButton.ctorParameters = () => [
  74. { type: Config, },
  75. { type: ElementRef, },
  76. { type: Renderer, },
  77. ];
  78. //# sourceMappingURL=fab.js.map