a zip code crypto-currency system good for red ONLY

item-sliding.d.ts 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. import { ElementRef, EventEmitter, NgZone, QueryList, Renderer } from '@angular/core';
  2. import { Item } from './item';
  3. import { List } from '../list/list';
  4. import { Platform } from '../../platform/platform';
  5. import { ItemOptions } from './item-options';
  6. /**
  7. * @name ItemSliding
  8. * @description
  9. * A sliding item is a list item that can be swiped to reveal buttons. It requires
  10. * an [Item](../Item) component as a child and a [List](../../list/List) component as
  11. * a parent. All buttons to reveal can be placed in the `<ion-item-options>` element.
  12. *
  13. * @usage
  14. * ```html
  15. * <ion-list>
  16. * <ion-item-sliding #item>
  17. * <ion-item>
  18. * Item
  19. * </ion-item>
  20. * <ion-item-options side="left">
  21. * <button ion-button (click)="favorite(item)">Favorite</button>
  22. * <button ion-button color="danger" (click)="share(item)">Share</button>
  23. * </ion-item-options>
  24. *
  25. * <ion-item-options side="right">
  26. * <button ion-button (click)="unread(item)">Unread</button>
  27. * </ion-item-options>
  28. * </ion-item-sliding>
  29. * </ion-list>
  30. * ```
  31. *
  32. * ### Swipe Direction
  33. * By default, the buttons are revealed when the sliding item is swiped from right to left,
  34. * so the buttons are placed in the right side. But it's also possible to reveal them
  35. * in the right side (sliding from left to right) by setting the `side` attribute
  36. * on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time
  37. * in order to reveal two different sets of buttons depending the swipping direction.
  38. *
  39. * ```html
  40. * <ion-item-options side="right">
  41. * <button ion-button (click)="archive(item)">
  42. * <ion-icon name="archive"></ion-icon>
  43. * Archive
  44. * </button>
  45. * </ion-item-options>
  46. *
  47. * <ion-item-options side="left">
  48. * <button ion-button (click)="archive(item)">
  49. * <ion-icon name="archive"></ion-icon>
  50. * Archive
  51. * </button>
  52. * </ion-item-options>
  53. * ```
  54. *
  55. * ### Listening for events (ionDrag) and (ionSwipe)
  56. * It's possible to know the current relative position of the sliding item by subscribing
  57. * to the (ionDrag)` event.
  58. *
  59. * ```html
  60. * <ion-item-sliding (ionDrag)="logDrag($event)">
  61. * <ion-item>Item</ion-item>
  62. * <ion-item-options>
  63. * <button ion-button>Favorite</button>
  64. * </ion-item-options>
  65. * </ion-item-sliding>
  66. * ```
  67. *
  68. * ### Button Layout
  69. * If an icon is placed with text in the option button, by default it will
  70. * display the icon on top of the text. This can be changed to display the icon
  71. * to the left of the text by setting `icon-start` as an attribute on the
  72. * `<ion-item-options>` element.
  73. *
  74. * ```html
  75. * <ion-item-options icon-start>
  76. * <button ion-button (click)="archive(item)">
  77. * <ion-icon name="archive"></ion-icon>
  78. * Archive
  79. * </button>
  80. * </ion-item-options>
  81. *
  82. * ```
  83. *
  84. * ### Expandable Options
  85. *
  86. * Options can be expanded to take up the full width of the item if you swipe past
  87. * a certain point. This can be combined with the `ionSwipe` event to call methods
  88. * on the class.
  89. *
  90. * ```html
  91. *
  92. * <ion-item-sliding (ionSwipe)="delete(item)">
  93. * <ion-item>Item</ion-item>
  94. * <ion-item-options>
  95. * <button ion-button expandable (click)="delete(item)">Delete</button>
  96. * </ion-item-options>
  97. * </ion-item-sliding>
  98. * ```
  99. *
  100. * We can call `delete` by either clicking the button, or by doing a full swipe on the item.
  101. *
  102. * @demo /docs/demos/src/item-sliding/
  103. * @see {@link /docs/components#lists List Component Docs}
  104. * @see {@link ../Item Item API Docs}
  105. * @see {@link ../../list/List List API Docs}
  106. */
  107. export declare class ItemSliding {
  108. private _plt;
  109. private _renderer;
  110. private _elementRef;
  111. private _zone;
  112. private _openAmount;
  113. private _startX;
  114. private _optsWidthRightSide;
  115. private _optsWidthLeftSide;
  116. private _sides;
  117. private _tmr;
  118. private _leftOptions;
  119. private _rightOptions;
  120. private _optsDirty;
  121. private _state;
  122. /**
  123. * @hidden
  124. */
  125. item: Item;
  126. /**
  127. * @output {event} Emitted when the sliding position changes.
  128. * It reports the relative position.
  129. *
  130. * ```ts
  131. * ondrag(item) {
  132. * let percent = item.getSlidingPercent();
  133. * if (percent > 0) {
  134. * // positive
  135. * console.log('right side');
  136. * } else {
  137. * // negative
  138. * console.log('left side');
  139. * }
  140. * if (Math.abs(percent) > 1) {
  141. * console.log('overscroll');
  142. * }
  143. * }
  144. * ```
  145. *
  146. */
  147. ionDrag: EventEmitter<ItemSliding>;
  148. constructor(list: List, _plt: Platform, _renderer: Renderer, _elementRef: ElementRef, _zone: NgZone);
  149. _itemOptions: QueryList<ItemOptions>;
  150. /**
  151. * @hidden
  152. */
  153. getOpenAmount(): number;
  154. /**
  155. * @hidden
  156. */
  157. getSlidingPercent(): number;
  158. /**
  159. * @hidden
  160. */
  161. startSliding(startX: number): void;
  162. /**
  163. * @hidden
  164. */
  165. moveSliding(x: number): number;
  166. /**
  167. * @hidden
  168. */
  169. endSliding(velocity: number): number;
  170. /**
  171. * @hidden
  172. */
  173. private fireSwipeEvent();
  174. /**
  175. * @hidden
  176. */
  177. private calculateOptsWidth();
  178. private _setOpenAmount(openAmount, isFinal);
  179. private _setState(state);
  180. /**
  181. * Close the sliding item. Items can also be closed from the [List](../../list/List).
  182. *
  183. * The sliding item can be closed by grabbing a reference to `ItemSliding`. In the
  184. * below example, the template reference variable `slidingItem` is placed on the element
  185. * and passed to the `share` method.
  186. *
  187. * ```html
  188. * <ion-list>
  189. * <ion-item-sliding #slidingItem>
  190. * <ion-item>
  191. * Item
  192. * </ion-item>
  193. * <ion-item-options>
  194. * <button ion-button (click)="share(slidingItem)">Share</button>
  195. * </ion-item-options>
  196. * </ion-item-sliding>
  197. * </ion-list>
  198. * ```
  199. *
  200. * ```ts
  201. * import { Component } from '@angular/core';
  202. * import { ItemSliding } from 'ionic-angular';
  203. *
  204. * @Component({...})
  205. * export class MyClass {
  206. * constructor() { }
  207. *
  208. * share(slidingItem: ItemSliding) {
  209. * slidingItem.close();
  210. * }
  211. * }
  212. * ```
  213. */
  214. close(): void;
  215. /**
  216. * @hidden
  217. */
  218. setElementClass(cssClass: string, shouldAdd: boolean): void;
  219. }