javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(itemSliding, itemOptions): update docs

Browse Source
This commit is contained in:
mhartington
2016-06-16 16:16:35 -04:00
parent 55eccb3493
commit 2392d1da66
1 changed files with 99 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/item/item-sliding.ts
View File

@ -16,13 +16,40 @@ export const enum SideFlags {
}
/**
* @private
* @name ItemOptions
* @description
* The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
* You can combind the `(ionSiwpe)` event plus the `expandable` directive to create a full swipe action for the item.
*
* @usage
*
* ```html
* <ion-item-sliding>
* <ion-item>
* Item 1
* </ion-item>
* <ion-item-options side="right" (ionSwipe)="saveItem(item)">
* <button expandable (click)="saveItem(item)">
* <ion-icon name="star"></ion-icon>
* </button>
* </ion-item-options>
* </ion-item-sliding>
*```
*/
@Directive({
selector: 'ion-item-options',
})
export class ItemOptions {
/**
* @input {string} the side the option button should be on. Defaults to right
* If you have multiple `ion-item-options`, a side must be provided for each.
*/
@Input() side: string;
/**
* @output {event} Expression to evaluate when the item has been fully swiped.
*/
@Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter();
constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
@ -46,6 +73,9 @@ export class ItemOptions {
}
}
/**
* @private
*/
width() {
return this._elementRef.nativeElement.offsetWidth;
}
@ -62,70 +92,11 @@ const enum SlidingState {
/**
* @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 `<ion-item-options>` element.
*
* ### 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
* <ion-item-options side="right">
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* <ion-item-options>
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* ```
*
* ### 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
* <ion-item-options side="right">
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* <ion-item-options>
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* ```
*
* ### 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-left` as an attribute on the
* `<ion-item-options>` element.
*
* ```html
* <ion-item-sliding (ionDrag)="ondrag($event)">
* <ion-item>Item</ion-item>
* <ion-item-options>
* <button>Favorite</button>
* </ion-item-options>
* </ion-item-sliding>
* ```
*
* @usage
* ```html
* <ion-list>
@ -145,6 +116,59 @@ const enum SlidingState {
* </ion-list>
* ```
*
* ### 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
* <ion-item-options side="right">
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* <ion-item-options side="left">
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
* ```
*
* ### 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
* <ion-item-sliding (ionDrag)="logDrag($event)">
* <ion-item>Item</ion-item>
* <ion-item-options>
* <button>Favorite</button>
* </ion-item-options>
* </ion-item-sliding>
* ```
*
* ### 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-left` as an attribute on the
* `<ion-item-options>` element.
*
* ```html
* <ion-item-options icon-left>
* <button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive
* </button>
* </ion-item-options>
*
* ```
*
*
* @demo /docs/v2/demos/item-sliding/
* @see {@link /docs/v2/components#lists List Component Docs}
* @see {@link ../Item Item API Docs}
@ -169,8 +193,15 @@ export class ItemSliding {
private _rightOptions: ItemOptions;
private _optsDirty: boolean = true;
private _state: SlidingState = SlidingState.Disabled;
/**
* @private
* */
slidingPercent: number = 0;
/**
* @private
* */
@ContentChild(Item) private item: Item;
@ -290,6 +321,9 @@ export class ItemSliding {
return restingPoint;
}
/**
* @private
* */
fireSwipeEvent() {
if (this.slidingPercent > SWIPE_FACTOR) {
this._rightOptions.ionSwipe.emit(this);
@ -298,6 +332,9 @@ export class ItemSliding {
}
}
/**
* @private
* */
calculateOptsWidth() {
nativeRaf(() => {
if (this._optsDirty) {
@ -382,7 +419,7 @@ export class ItemSliding {
/**
* Close the sliding item. Items can also be closed from the [List](../../list/List).
*
* The sliding item can be closed by garbbing a reference to `ItemSliding`. In the
* 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.
*
@ -437,4 +474,4 @@ function shouldClose(isCloseDirection: boolean, isMovingFast: boolean, isOnClose
let shouldClose = (!isMovingFast && isOnCloseZone) || (isCloseDirection && isMovingFast);
return shouldClose;
}