Skip to content

Commit

Permalink
Update README.
Browse files Browse the repository at this point in the history
  • Loading branch information
eakoriakin committed Sep 16, 2018
1 parent 433d199 commit 83e7461
Showing 1 changed file with 50 additions and 18 deletions.
68 changes: 50 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[npm-url]: https://npmjs.org/package/ionic-selectable
[npm-image]: https://img.shields.io/npm/v/ionic-select-searchable.svg
[npm-url]: https://npmjs.org/package/ionic-select-searchable
[dm-image]: https://img.shields.io/npm/dm/ionic-select-searchable.svg
[dt-image]: https://img.shields.io/npm/dt/ionic-select-searchable.svg

Expand All @@ -8,55 +8,70 @@
[![npm][dt-image]][npm-url]
[![npm][dm-image]][npm-url]

An Ionic component similar to [Ionic Select](https://ionicframework.com/docs/api/components/select/Select/), that allows to search items, including async search, group, add, edit, delete items, and much more.
An Ionic component similar to [Ionic Select](https://ionicframework.com/docs/api/components/select/Select/), that allows to search items, including async search, infinite scrolling and more.

![iOS Demo](demo.gif)
![iOS Demo](images/demo.gif)

# Contents
* [Demo](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html)
* [Getting started](#getting-started)
* [FAQ](../../wiki/FAQ)
* [Documentation](../../wiki/Documentation)
* [Theming](../../wiki/Theming)
* [Version comparison](#version-comparison)

## Getting started

1. Install it.
1. Decide on the version you want to use `Free` or `Pro`. See [Version comparison](#version-comparison) to help you chose.

2. Install it.

`Ionic Selectable Free`
```
npm install ionic-selectable --save
```

`Ionic Selectable Pro`

Purchase it from [Ionic Market](https://market.ionicframework.com/plugins/ionic-selectable).
Copy `ionic-selectable-3.0.0.tgz` archive to the root of your project. Then `cd` to the project root and install the package.

```
npm install ionic-select-searchable --save
npm install ionic-selectable-3.0.0.tgz
```

2. Import it.
3. Import it.
```
import { SelectSearchableModule } from 'ionic-select-searchable';
import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
imports: [
SelectSearchableModule
IonicSelectableModule
]
})
export class AppModule { }
```
3. Add it to template.

4. Add it to template.
```
<ion-item>
<ion-label>Port</ion-label>
<select-searchable
<ionic-selectable
item-content
[(ngModel)]="port"
[items]="ports"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
(onChange)="portChange($event)">
</select-searchable>
</ionic-selectable>
</ion-item>
```
4. Configure it.

5. Configure it.
```
import { SelectSearchableComponent } from 'ionic-select-searchable';
import { IonicSelectableComponent } from 'ionic-selectable';
class Port {
public id: number;
Expand All @@ -77,17 +92,34 @@ export class HomePage {
}
portChange(event: {
component: SelectSearchableComponent,
component: IonicSelectableComponent,
value: any
}) {
console.log('port:', event.value);
}
}
```

5. Enjoy it 😉
6. That is just a small part of what `Ionic Selectable` is capable of.
See [more samples](https://stackblitz.com/@eakoriakin) and explore the [docs](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation) and [FAQ](https://github.com/eakoriakin/ionic-selectable/wiki/FAQ) to learn more.
6. Enjoy it 😉
7. Check out [live demos](https://ionic-selectable.herokuapp.com) to see what `Ionic Selectable` is capable of.
Also, explore the [docs](../../wiki/Documentation) and [FAQ](../../wiki/FAQ) to learn more about its features.

## Version comparison

| Ionic Selectable Free | Ionic Selectable Pro |
| - | - |
| [Single item selection](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html) | [Single item selection](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html) |
| [Multiple item selection](../../wiki/Documentation#ismultiple) | [Multiple item selection](../../wiki/Documentation#ismultiple) |
| [Search items](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html) | [Search items](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html) |
| [Search items asynchronously](https://stackblitz.com/edit/ionic-selectable-on-search?file=pages/home/home.html) | [Search items asynchronously](https://stackblitz.com/edit/ionic-selectable-on-search?file=pages/home/home.html) |
| [Angular Forms integration](https://stackblitz.com/edit/ionic-selectable-form-control?file=pages/home/home.html) | [Angular Forms integration](https://stackblitz.com/edit/ionic-selectable-form-control?file=pages/home/home.html) |
| [Validation](../../wiki/Documentation#validation) | [Validation](../../wiki/Documentation#validation) |
| [Ionic InfiniteScroll](https://stackblitz.com/edit/ionic-selectable-infinite-scroll?file=pages/home/home.html) | [Ionic InfiniteScroll](https://stackblitz.com/edit/ionic-selectable-infinite-scroll?file=pages/home/home.html) |
| [Ionic VirtualScroll](https://stackblitz.com/edit/ionic-selectable-virtual-scroll?file=pages/home/home.html) | [Ionic VirtualScroll](https://stackblitz.com/edit/ionic-selectable-virtual-scroll?file=pages/home/home.html) |
| | [Templates](../../wiki/Documentation#templates) |
| | [Grouping items](../..//wiki/Documentation#grouping) |
| | [Editing, adding and deleting items](../../wiki/Documentation#editing) |
| | [Disabling items](../../wiki/Documentation#disableditems) |

## Share it
If you find this component useful, please star the repo to let others know that it's reliable. Also, share it with friends and colleagues who might find it useful as well. Thank you 😄
If you find this component useful, please star the [repo](https://github.com/eakoriakin/ionic-selectable) to let others know that it's reliable. Also, share it with friends and colleagues who might find it useful as well. Thank you 😄

0 comments on commit 83e7461

Please sign in to comment.