| 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 | }
|