Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Guide and readme update #300

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Guide and readme update #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f3f8121
Update Readme & Guide
Aug 31, 2015
49bf0b5
Rest of guide update
Aug 31, 2015
b9e55a8
Update guide
jorjordandan Aug 31, 2015
da1a832
missing backtick
jorjordandan Aug 31, 2015
c9c56d5
Add info about using listButtons to guide
jorjordandan Aug 31, 2015
7ed9534
Minor copy edits to guide
jorjordandan Aug 31, 2015
cffc880
missing space.
jorjordandan Aug 31, 2015
5405e60
spelling
jorjordandan Aug 31, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
<a class="item-content">
<img src="{{avatarUrl}}">
{{name.first}} {{name.last}}
</a>
{{> 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

Expand Down
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down