import { ElementRef, EventEmitter, NgZone, QueryList, Renderer } from '@angular/core'; import { Item } from './item'; import { List } from '../list/list'; import { Platform } from '../../platform/platform'; import { ItemOptions } from './item-options'; /** * @name ItemSliding * @description * A sliding item is a list item that can be swiped to reveal buttons. It requires * an [Item](../Item) component as a child and a [List](../../list/List) component as * a parent. All buttons to reveal can be placed in the `` element. * * @usage * ```html * * * * Item * * * * * * * * * * * * ``` * * ### Swipe Direction * By default, the buttons are revealed when the sliding item is swiped from right to left, * so the buttons are placed in the right side. But it's also possible to reveal them * in the right side (sliding from left to right) by setting the `side` attribute * on the `ion-item-options` element. Up to 2 `ion-item-options` can used at the same time * in order to reveal two different sets of buttons depending the swipping direction. * * ```html * * * * * * * * ``` * * ### Listening for events (ionDrag) and (ionSwipe) * It's possible to know the current relative position of the sliding item by subscribing * to the (ionDrag)` event. * * ```html * * Item * * * * * ``` * * ### Button Layout * If an icon is placed with text in the option button, by default it will * display the icon on top of the text. This can be changed to display the icon * to the left of the text by setting `icon-start` as an attribute on the * `` element. * * ```html * * * * * ``` * * ### Expandable Options * * Options can be expanded to take up the full width of the item if you swipe past * a certain point. This can be combined with the `ionSwipe` event to call methods * on the class. * * ```html * * * Item * * * * * ``` * * We can call `delete` by either clicking the button, or by doing a full swipe on the item. * * @demo /docs/demos/src/item-sliding/ * @see {@link /docs/components#lists List Component Docs} * @see {@link ../Item Item API Docs} * @see {@link ../../list/List List API Docs} */ export declare class ItemSliding { private _plt; private _renderer; private _elementRef; private _zone; private _openAmount; private _startX; private _optsWidthRightSide; private _optsWidthLeftSide; private _sides; private _tmr; private _leftOptions; private _rightOptions; private _optsDirty; private _state; /** * @hidden */ item: Item; /** * @output {event} Emitted when the sliding position changes. * It reports the relative position. * * ```ts * ondrag(item) { * let percent = item.getSlidingPercent(); * if (percent > 0) { * // positive * console.log('right side'); * } else { * // negative * console.log('left side'); * } * if (Math.abs(percent) > 1) { * console.log('overscroll'); * } * } * ``` * */ ionDrag: EventEmitter; constructor(list: List, _plt: Platform, _renderer: Renderer, _elementRef: ElementRef, _zone: NgZone); _itemOptions: QueryList; /** * @hidden */ getOpenAmount(): number; /** * @hidden */ getSlidingPercent(): number; /** * @hidden */ startSliding(startX: number): void; /** * @hidden */ moveSliding(x: number): number; /** * @hidden */ endSliding(velocity: number): number; /** * @hidden */ private fireSwipeEvent(); /** * @hidden */ private calculateOptsWidth(); private _setOpenAmount(openAmount, isFinal); private _setState(state); /** * Close the sliding item. Items can also be closed from the [List](../../list/List). * * The sliding item can be closed by grabbing a reference to `ItemSliding`. In the * below example, the template reference variable `slidingItem` is placed on the element * and passed to the `share` method. * * ```html * * * * Item * * * * * * * ``` * * ```ts * import { Component } from '@angular/core'; * import { ItemSliding } from 'ionic-angular'; * * @Component({...}) * export class MyClass { * constructor() { } * * share(slidingItem: ItemSliding) { * slidingItem.close(); * } * } * ``` */ close(): void; /** * @hidden */ setElementClass(cssClass: string, shouldAdd: boolean): void; }