javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(item-sliding): update the readme and add angular usage

Browse Source
This commit is contained in:
Brandy Carney
2018-07-09 18:39:53 -04:00
parent c9d5f3d379
commit f7c294e569
3 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/item-options/usage/angular.md
View File

@ -1,12 +0,0 @@
```html
<ion-item-sliding>
<ion-item>
Item 1
</ion-item>
<ion-item-options side="end" (ionSwipe)="saveItem(item)">
<ion-item-option expandable (click)="saveItem(item)">
<ion-icon name="star"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
```

14
core/src/components/item-sliding/readme.md
View File

@ -1,18 +1,16 @@
# ion-item-sliding # ion-item-sliding
A Sliding item is a component that contains an item that can be dragged to reveal buttons. It requires an [Item](../Item) component as a child. All options to reveal should be placed in the item options element. A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](../item) component as a child. All options to reveal should be placed in the [item options](../item-options) element.
### Direction
By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping to the opposite direction, set the `side` attribute to `"start"` on the `ion-item-options` element. Refer to [`ion-item-options` docs](https://github.com/ionic-team/ionic/blob/master/core/src/components/item-options/readme.md). Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction. ### Swipe Direction
### Events By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`]((../item-options) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
It's possible to know the current relative position of the sliding item, add an event listener to the `ionDrag` event.
### Layout ### Options Layout
By default if an icon is placed with text in the option button, it will display the icon on top of the text. By default if an icon is placed with text in the [item option](../item-option), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
| Slot | description | | Slot | description |
| ----------- | ------------------------------------------------------------------------ | | ----------- | ------------------------------------------------------------------------ |
@ -22,10 +20,12 @@ By default if an icon is placed with text in the option button, it will display
| `bottom` | The icon is below the text | | `bottom` | The icon is below the text |
| `end` | In LTR, end is the right side of the button, and in RTL it is the left | | `end` | In LTR, end is the right side of the button, and in RTL it is the left |
### Expandable Options ### 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. 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.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

17
core/src/components/item-sliding/usage/angular.md Normal file
View File

@ -0,0 +1,17 @@
```html
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
<ion-item-option color="danger" (click)="share(item)">Share</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
```