diff --git a/GUIDE.md b/GUIDE.md index 883a866..530088a 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -343,7 +343,46 @@ Lastly you can also pass a raw url by including the `href` attribute. {{/each}} {{/ionList}} ``` +###Lists with sort and delete +To add the ability to sort and delete lists, you need to supply your collection to the the `ionSortable` argument of the `ionList` component, and also add the `ionListButton` components that will be shown inside the list item. + +Here is an example from the contacts demo app: +``` +{{#ionList ionSortable=collection}} + {{#each contacts}} + + {{#ionItem path="contacts.show" buttonRight=true avatar=true class="item-icon-right"}} + + + {{name.first}} {{name.last}} + + {{> ionIcon icon="ios-arrow-forward" class="positive"}} + + {{#ionListButton action="delete" side='left'}} + {{>ionIcon icon="ion-minus-circled"}} + {{/ionListButton}} + + {{#ionListButton action="reorder" side="right"}} + {{>ionIcon icon="drag"}} + {{/ionListButton}} + + {{/ionItem}} + {{/each}} +{{/ionList}} +``` +In this example, the `collection` argument in `ionSortable=collection` is a helper method that returns the Contacts collection: +``` +Template.contacts.helpers({ + collection: function() { + return Contacts; + }, + //other helper methods... +}); +``` +You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value `"left"`, `"right"` or `"both"` to indicate which sides you wish to toggle. + +If you want, you can use also the hidable buttons on `ionItem` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in your event map. ## Modals diff --git a/README.md b/README.md index 611869b..d58aa93 100644 --- a/README.md +++ b/README.md @@ -60,13 +60,13 @@ You can also keep track of the various other repos from the [Meteoric team](http * [x] ion-header-bar * [x] ion-footer-bar * [x] Keyboard (requires [cordova](http://cordova.apache.org/) integration) -* [ ] Lists (needs edit/remove/sort functionality) - * [ ] ion-list - * [ ] ion-item - * [ ] ion-delete-button - * [ ] ion-reorder-button +* [X] Lists (needs edit/remove/sort functionality) + * [X] ion-list + * [X] ion-item + * [X] ion-delete-button + * [X] ion-reorder-button * [ ] ion-option-button - * [x] collection-repeat (not needed with Blaze/Spacebars) + * [ ] collection-repeat * [x] Loading * [x] Modal * [x] Navigation (requires [iron:router](https://github.com/EventedMind/iron-router) integration)