Ion Multi Item Picker--An Ionic2 Custom Component
Simulate IOS multi column picker by ionic2 picker.
Check out the live demo here: https://raychenfj.github.io/ion-multi-picker/
npm install ion-multi-picker --save
1.Import MultiPicker as directive in your page.
import {MultiPicker} from 'ion-multi-picker';
@Component({
templateUrl: 'build/pages/home/home.html',
directives: [MultiPicker],
})2.Initialize picker columns.
constructor(private navCtrl: NavController) {
this.simpleColumns = [
{
name: 'col1',
options: [{ text: '1', value: '1' },
{ text: '2', value: '2' },
{ text: '3', value: '3' }]
},
{
name: 'col2',
options: [{ text: '1-1', value: '1-1' },
{ text: '1-2', value: '1-2' },
{ text: '2-1', value: '2-1' },
{ text: '2-2', value: '2-2' },
{ text: '3-1', value: '3-1' },]
},
{
name: 'col3',
options: [{ text: '1-1-1', value: '1-1-1' },
{ text: '1-1-2', value: '1-1-2' },
{ text: '1-2-1', value: '1-2-1' },
{ text: '1-2-2', value: '1-2-2' },
{ text: '2-1-1', value: '2-1-1' },
{ text: '2-1-2', value: '2-1-2' },
{ text: '2-2-1', value: '2-2-1' },
{ text: '2-2-2', value: '2-2-2' },
{ text: '3-1-1', value: '3-1-1' },
{ text: '3-1-2', value: '3-1-2' },]
}
];
}3.Import the corresponding scss at the end of app.core.scss, app.ios.scss, app.md.scss, app.wp.scss.
@import "../../node_modules/ion-multi-picker/multi-picker"; //app.core.scss
@import "../../node_modules/ion-multi-picker/multi-picker.ios"; //app.ios.scss
@import "../../node_modules/ion-multi-picker/multi-picker.md"; //app.md.scss
@import "../../node_modules/ion-multi-picker/multi-picker.wp"; //app.wp.scss
4.In your html template, add ion-multi-picker like other ionic component.Use [(ngModel)] to bind your data.
Note: Don't forget the item-content attribute
<ion-item>
<ion-label>Simple Picker</ion-label>
<ion-multi-picker item-content [multiPickerColumns]="simpleColumns"></ion-multi-picker>
</ion-item>-
@Input() multiPickerColumns Array of MultiPickerColumn.
-
MultiPickerColumn
- name: Coulmn name, will be the column index start from 0 by default.
- options: Options in a column, array of MultiPickerOption.
-
MultiPickerOption
- text: The text displayed in the picker column.
- value: The associated value of the text.
- parentVal: Specify the dependency between current column and previous column.
- disabled: The option is displayed or not.
MIT