docs(reorder): Update incomplete reorder docs (#17417)

* add base reorder doc updates

* update doc wording

* remove extra sentence

* clear up explanation sentence

* fix typo

* run build

* fix doc definition for ionitemReorder

* make requested changes

* remove prop table
This commit is contained in:
Liam DeBeasi
2019-02-07 13:15:52 -05:00
committed by GitHub
parent 5a4f35a380
commit c700d35b35
4 changed files with 9 additions and 18 deletions

View File

@ -3510,7 +3510,7 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array. The complete() method exposed as
* Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
*/
'onIonItemReorder'?: (event: CustomEvent<ItemReorderEventDetail>) => void;
}

View File

@ -13,7 +13,7 @@ reorderGroup.addEventListener('ionItemReorder', (ev) => {
});
```
The event's detail includes all the relevant information about the reorder operation, including the `from` and `to` indexes. The meaning of this indexes are pretty self-explanatory, the item **from** index X, moved **to** the index Y.
The event's detail includes all the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` index X `to` index Y.
For example, in this list we move the item at index `0` to the index `3`:
@ -42,10 +42,6 @@ Fortunately this `complete()` method can optionally accept an array as input and
this.dataList = reorderGroup.complete(this.dataList);
```
This utility is really handy when
<!-- Auto Generated Below -->
@ -178,9 +174,9 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
## Events
| Event | Description | Type |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| `ionItemReorder` | Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array. The complete() method exposed as | `CustomEvent<ItemReorderEventDetail>` |
| Event | Description | Type |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. | `CustomEvent<ItemReorderEventDetail>` |
## Methods

View File

@ -50,11 +50,9 @@ export class ReorderGroup implements ComponentInterface {
}
/**
* Event that needs to be listen to in order to respond to reorder action.
* `ion-reorder-group` uses this event to delegate to the user the reordering of data array.
*
*
* The complete() method exposed as
* Event that needs to be listened to in order to complete the reorder action.
* Once the event has been emitted, the `complete()` method then needs
* to be called in order to finalize the reorder action.
*/
@Event() ionItemReorder!: EventEmitter<ItemReorderEventDetail>;

View File

@ -2,7 +2,7 @@
Reorder is a component that allows an item to be dragged to change its order. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
`ion-reorder` is the anchor users will use to drag and drop items inside the `ion-reorder-group`. It must be added to `ion-item` in order for them to be draggable.
`ion-reorder` is the anchor users will use to drag and drop items inside the `ion-reorder-group`.
```html
<ion-item>
@ -13,9 +13,6 @@ Reorder is a component that allows an item to be dragged to change its order. It
</ion-item>
```
The position of the
<!-- Auto Generated Below -->