Ion-Multi-Picker
Ion Multi Item Picker--An Ionic2 Custom Picker Component
Simulate IOS multi column picker by ionic2 picker.
Github: https://github.com/raychenfj/ion-multi-picker
NPM: https://www.npmjs.com/package/ion-multi-picker
Preview
Picker with Independent/ Dependent Columns
Demo
Check out the live demo here: https://raychenfj.github.io/ion-multi-picker/
Supported Version
Ionic2 2.0.0-rc.3
Ionic CLI 2.1.12
Installation
npm install ion-multi-picker --save
Usage
1.Import MultiPickerModule to your app/module.
import { MultiPickerModule } from 'ion-multi-picker'; @NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, ], imports: [ IonicModule.forRoot(MyApp), MultiPickerModule //Import MultiPickerModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, ], providers: []})export class AppModule {}
2.Initialize picker columns in your controller.
constructorprivate navCtrl: NavController
You can use parentVal
property to create dependency between each column.
this.dependentColumns = ;
3.Add ion-multi-picker to your html template.
Simple Picker
Note: Don't miss the item-content
attribute
Like other ionic components, you can use (ngModel)]
to bind your data.
Default Value
Set disabled
to true
to prevent interaction.
Disabled Picker
New Feature, Support Enum
It's a good case to use picker to choose value for an enum variable.
This componennt now provide a shorthand util function convertEnumToColumns
to generate column from enum type,
and also you can bind a enum variable to ngModel
.
Check the example fruit picker in the demo.
- Use
convertEnumToColumns
to generate columns;
;
- Binding enum variable to
ngModel
;
Fruit Picker
Attributes
Attribute | Description | Type | Options | Default |
---|---|---|---|---|
multiPickerColumns | Required, configure multi picker columns | Array of MultiPickerColumn | - | - |
item-content | Required, add this attribute so that this custom component can be display correctly under ion-item tag |
- | - | - |
Types
- MultiPickerColumn
Property | Description | Type | Options | Default |
---|---|---|---|---|
options | Required, Options in a column | Array of MultiPickerOption | - | - |
name | Optional, Column name | String | - | index start from 0 |
- MultiPickerOption
Property | Description | Type | Options | Default |
---|---|---|---|---|
text | Required, text displayed in the picker column | String | - | - |
value | Required, the associated value of the text | String | - | - |
parentVal | Optional, specify the dependency between current column and previous column | String | Value from your previos column | - |
disabled | Optional, the option is visible or not | Boolean | - | false |
Contribution
Welcome issue report, PR and contributors. Help me improve it.
Fork and git clone
this project,
most code for the multi picker is under src/app/components/multi-picker
.
The unit test framework is karma + webpack + jasmine. And e2e test is protractor.
Add your unit test and use npm test
to start karma.
Add your e2e test, run ionic serve
and then in another terminal use npm run e2e
to run protractor.
You can also add your use case in the app/pages
.
Finally, send me a PULL REQUEST
.
License
MIT