split-pane.d.ts 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import { ElementRef, EventEmitter, NgZone, QueryList, Renderer } from '@angular/core';
  2. import { Ion } from '../ion';
  3. import { Config } from '../../config/config';
  4. import { Platform } from '../../platform/platform';
  5. /**
  6. * @hidden
  7. */
  8. export declare abstract class RootNode {
  9. abstract getElementRef(): ElementRef;
  10. abstract initPane(): boolean;
  11. abstract paneChanged?(visible: boolean): void;
  12. }
  13. /**
  14. * @name SplitPane
  15. *
  16. * @description
  17. * SplitPane is a component that makes it possible to create multi-view layout.
  18. * Similar to iPad apps, SplitPane allows UI elements, like Menus, to be
  19. * displayed as the viewport increases.
  20. *
  21. * If the devices screen size is below a certain size, the SplitPane will
  22. * collapse and the menu will become hidden again. This is especially useful when
  23. * creating an app that will be served over a browser or deployed through the app
  24. * store to phones and tablets.
  25. *
  26. * @usage
  27. * To use SplitPane, simply add the component around your root component.
  28. * In this example, we'll be using a sidemenu layout, similar to what is
  29. * provided from the sidemenu starter template.
  30. *
  31. * ```html
  32. * <ion-split-pane>
  33. * <!-- our side menu -->
  34. * <ion-menu [content]="content">
  35. * <ion-header>
  36. * <ion-toolbar>
  37. * <ion-title>Menu</ion-title>
  38. * </ion-toolbar>
  39. * </ion-header>
  40. * </ion-menu>
  41. *
  42. * <!-- the main content -->
  43. * <ion-nav [root]="root" main #content></ion-nav>
  44. * </ion-split-pane>
  45. * ```
  46. *
  47. * Here, SplitPane will look for the element with the `main` attribute and make
  48. * that the central component on larger screens. The `main` component can be any
  49. * Ionic component (`ion-nav` or `ion-tabs`) except `ion-menu`.
  50. *
  51. * ### Setting breakpoints
  52. *
  53. * By default, SplitPane will expand when the screen is larger than 768px.
  54. * If you want to customize this, use the `when` input. The `when` input can
  55. * accept any valid media query, as it uses `matchMedia()` underneath.
  56. *
  57. * ```
  58. * <ion-split-pane when="(min-width: 475px)">
  59. *
  60. * <!-- our side menu -->
  61. * <ion-menu [content]="content">
  62. * ....
  63. * </ion-menu>
  64. *
  65. * <!-- the main content -->
  66. * <ion-nav [root]="root" main #content></ion-nav>
  67. * </ion-split-pane>
  68. * ```
  69. *
  70. * SplitPane also provides some predefined media queries that can be used.
  71. *
  72. * ```html
  73. * <!-- could be "xs", "sm", "md", "lg", or "xl" -->
  74. * <ion-split-pane when="lg">
  75. * ...
  76. * </ion-split-pane>
  77. * ```
  78. *
  79. *
  80. * | Size | Value | Description |
  81. * |------|-----------------------|-----------------------------------------------------------------------|
  82. * | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) |
  83. * | `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px |
  84. * | `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px (default break point) |
  85. * | `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px |
  86. * | `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px |
  87. *
  88. * You can also pass in boolean values that will trigger SplitPane when the value
  89. * or expression evaluates to true.
  90. *
  91. *
  92. * ```html
  93. * <ion-split-pane [when]="isLarge">
  94. * ...
  95. * </ion-split-pane>
  96. * ```
  97. *
  98. * ```ts
  99. * class MyClass {
  100. * public isLarge = false;
  101. * constructor(){}
  102. * }
  103. * ```
  104. *
  105. * Or
  106. *
  107. * ```html
  108. * <ion-split-pane [when]="shouldShow()">
  109. * ...
  110. * </ion-split-pane>
  111. * ```
  112. *
  113. * ```ts
  114. * class MyClass {
  115. * constructor(){}
  116. * shouldShow(){
  117. * if(conditionA){
  118. * return true
  119. * } else {
  120. * return false
  121. * }
  122. * }
  123. * }
  124. * ```
  125. *
  126. */
  127. export declare class SplitPane extends Ion implements RootNode {
  128. private _zone;
  129. private _plt;
  130. _init: boolean;
  131. _visible: boolean;
  132. _isEnabled: boolean;
  133. _rmListener: any;
  134. _mediaQuery: string | boolean;
  135. _children: RootNode[];
  136. /**
  137. * @hidden
  138. */
  139. sideContent: RootNode;
  140. /**
  141. * @hidden
  142. */
  143. mainContent: RootNode;
  144. /**
  145. * @hidden
  146. */
  147. _setchildren: QueryList<RootNode>;
  148. /**
  149. * @input {string | boolean} When the split-pane should be shown.
  150. * Can be a CSS media query expression, or a shortcut expression.
  151. * Can also be a boolean expression.
  152. */
  153. when: string | boolean;
  154. /**
  155. * @input {boolean} If `false`, the split-pane is disabled, ie. the side pane will
  156. * never be displayed. Default `true`.
  157. */
  158. enabled: boolean;
  159. /**
  160. * @output {any} Expression to be called when the split-pane visibility has changed
  161. */
  162. ionChange: EventEmitter<SplitPane>;
  163. constructor(_zone: NgZone, _plt: Platform, config: Config, elementRef: ElementRef, renderer: Renderer);
  164. /**
  165. * @hidden
  166. */
  167. _register(node: RootNode, isMain: boolean, callback: Function): boolean;
  168. /**
  169. * @hidden
  170. */
  171. ngAfterViewInit(): void;
  172. /**
  173. * @hidden
  174. */
  175. _update(): void;
  176. /**
  177. * @hidden
  178. */
  179. _updateChildren(): void;
  180. /**
  181. * @hidden
  182. */
  183. _setVisible(visible: boolean): void;
  184. /**
  185. * @hidden
  186. */
  187. isVisible(): boolean;
  188. /**
  189. * @hidden
  190. */
  191. setElementClass(className: string, add: boolean): void;
  192. /**
  193. * @hidden
  194. */
  195. _setPaneCSSClass(elementRef: ElementRef, isMain: boolean): void;
  196. /**
  197. * @hidden
  198. */
  199. ngOnDestroy(): void;
  200. /**
  201. * @hidden
  202. */
  203. initPane(): boolean;
  204. }