gusonyang / ion-multi-picker

Multi Item Picker - An Ionic Custom Component

Ion-Multi-Picker

Ion Multi Item Picker--An Ionic2 Custom Component

Simulate IOS multi column picker by ionic2 picker.

Preview

Picker with Independent Coulmns

Picker with Dependent Columns

Sample: Chinese City Picker

Demo

Check out the live demo here: https://raychenfj.github.io/ion-multi-picker/

Install

npm install ion-multi-picker --save

Usage

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>

Data Structure

• @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.

License

MIT