fab-container.d.ts 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import { QueryList } from '@angular/core';
  2. import { Platform } from '../../platform/platform';
  3. import { UIEventManager } from '../../gestures/ui-event-manager';
  4. import { FabButton } from './fab';
  5. import { FabList } from './fab-list';
  6. /**
  7. * @name FabContainer
  8. * @module ionic
  9. *
  10. * @description
  11. * `<ion-fab>` is not a FAB button by itself but a container that assist the fab button (`<button ion-fab>`) allowing it
  12. * to be placed in fixed position that does not scroll with the content. It is also used to implement "material design speed dial",
  13. * ie. a FAB buttons displays a small lists of related actions when clicked.
  14. *
  15. * @property [top] - Places the container on the top of the content
  16. * @property [bottom] - Places the container on the bottom of the content
  17. * @property [left] - Places the container on the left
  18. * @property [right] - Places the container on the right
  19. * @property [middle] - Places the container on the middle vertically
  20. * @property [center] - Places the container on the center horizontally
  21. * @property [edge] - Used to place the container between the content and the header/footer
  22. *
  23. * @usage
  24. *
  25. * ```html
  26. * <!-- this fab is placed at top right -->
  27. * <ion-content>
  28. * <ion-fab top right>
  29. * <button ion-fab>Button</button>
  30. * </ion-fab>
  31. *
  32. * <!-- this fab is placed at the center of the content viewport -->
  33. * <ion-fab center middle>
  34. * <button ion-fab>Button</button>
  35. * </ion-fab>
  36. * </ion-content>
  37. * ```
  38. *
  39. * Ionic's FAB also supports "material design's fab speed dial". It is a normal fab button
  40. * that shows a list of related actions when clicked.
  41. *
  42. * The same `ion-fab` container can contain several `ion-fab-list` with different side values:
  43. * `top`, `bottom`, `left` and `right`. For example, if you want to have a list of button that are
  44. * on the top of the main button, you should use `side="top"` and so on. By default, if side is ommited, `side="bottom"`.
  45. *
  46. * ```html
  47. * <ion-content>
  48. * <!-- this fab is placed at bottom right -->
  49. * <ion-fab bottom right >
  50. * <button ion-fab>Share</button>
  51. * <ion-fab-list side="top">
  52. * <button ion-fab>Facebook</button>
  53. * <button ion-fab>Twitter</button>
  54. * <button ion-fab>Youtube</button>
  55. * </ion-fab-list>
  56. * <ion-fab-list side="left">
  57. * <button ion-fab>Vimeo</button>
  58. * </ion-fab-list>
  59. * </ion-fab>
  60. * </ion-content>
  61. * ```
  62. *
  63. * A FAB speed dial can also be closed programatically.
  64. *
  65. * ```html
  66. * <ion-content>
  67. * <ion-fab bottom right #fab>
  68. * <button ion-fab>Share</button>
  69. * <ion-fab-list side="top">
  70. * <button ion-fab (click)="share('facebook', fab)">Facebook</button>
  71. * <button ion-fab (click)="share('twitter', fab)">Twitter</button>
  72. * </ion-fab-list>
  73. * </ion-fab>
  74. * </ion-content>
  75. * ```
  76. *
  77. * ```ts
  78. * share(socialNet: string, fab: FabContainer) {
  79. * fab.close();
  80. * console.log("Sharing in", socialNet);
  81. * }
  82. * ```
  83. *
  84. * @demo /docs/demos/src/fab/
  85. * @see {@link /docs/components#fabs FAB Component Docs}
  86. */
  87. export declare class FabContainer {
  88. /**
  89. * @hidden
  90. */
  91. _events: UIEventManager;
  92. /**
  93. * @hidden
  94. */
  95. _listsActive: boolean;
  96. /**
  97. * @hidden
  98. */
  99. _mainButton: FabButton;
  100. /**
  101. * @hidden
  102. */
  103. _fabLists: QueryList<FabList>;
  104. constructor(plt: Platform);
  105. /**
  106. * @hidden
  107. */
  108. ngAfterContentInit(): void;
  109. /**
  110. * @hidden
  111. */
  112. clickHandler(ev: any): void;
  113. /**
  114. * @hidden
  115. */
  116. canActivateList(ev: any): boolean;
  117. /**
  118. * @hidden
  119. */
  120. toggleList(): void;
  121. /**
  122. * @hidden
  123. */
  124. setActiveLists(isActive: boolean): void;
  125. /**
  126. * Close an active FAB list container
  127. */
  128. close(): void;
  129. /**
  130. * @hidden
  131. */
  132. ngOnDestroy(): void;
  133. }