All Projects → raychenfj → Ion Multi Picker

raychenfj / Ion Multi Picker

Licence: other
Multi Item Picker - An Ionic Custom Multi Picker Component

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ion Multi Picker

Ionic2 City Picker
ionic2的省市区三级联动组件
Stars: ✭ 95 (-61.07%)
Mutual labels:  ionic, picker
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (-5.74%)
Mutual labels:  picker
Wooionic3
An eCommerce App for WooCommerce stores using Ionic 3.
Stars: ✭ 208 (-14.75%)
Mutual labels:  ionic
Cordova Ionic Phonegap Branch Deep Linking Attribution
The Branch Cordova Ionic Phonegap SDK for deep linking and attribution. Branch helps mobile apps grow with deep links / deeplinks that power paid acquisition and re-engagement campaigns, referral programs, content sharing, deep linked emails, smart banners, custom user onboarding, and more.
Stars: ✭ 228 (-6.56%)
Mutual labels:  ionic
Onesignal Cordova Sdk
OneSignal is a free push notification service for mobile apps. This plugin makes it easy to integrate your Ionic, PhoneGap CLI, PhoneGap Build, Cordova, or Sencha Touch app with OneSignal. Supports Android, iOS, and Amazon's Fire OS platforms. https://onesignal.com
Stars: ✭ 214 (-12.3%)
Mutual labels:  ionic
Ionic Wordpress Integration
Ionic Wordpress starter app 😎. Learn how to communicate your ionic app with Wordpress REST API with this starter and detailed tutorial.
Stars: ✭ 230 (-5.74%)
Mutual labels:  ionic
Actual Number Picker
Android: A horizontal number picker
Stars: ✭ 206 (-15.57%)
Mutual labels:  picker
Django Colorfield
color field for django models with a nice color-picker in the admin. 🎨
Stars: ✭ 238 (-2.46%)
Mutual labels:  picker
Jh flutter demo
a flutter demo
Stars: ✭ 229 (-6.15%)
Mutual labels:  picker
Ionic4 Start Theme
📱 Ionic 4 start theme (v1.0.0) with: Angular 7 + @ionic/angular 4.0.0 final+ Ionic Native 5 + Ionic CLI 4.5.0 by:
Stars: ✭ 226 (-7.38%)
Mutual labels:  ionic
Numberslidingpicker
Android Number Picker with gestures
Stars: ✭ 225 (-7.79%)
Mutual labels:  picker
Facebookimagepicker
FacebookImagePicker is Facebook album photo picker written in Swift.
Stars: ✭ 220 (-9.84%)
Mutual labels:  picker
Json2typescript
Convert JSON to TypeScript with secure type checking!
Stars: ✭ 230 (-5.74%)
Mutual labels:  ionic
File Picker
The Kloudless File Picker is a file chooser and uploader for apps that integrates with 20+ cloud storage services with a few lines of code
Stars: ✭ 208 (-14.75%)
Mutual labels:  picker
Cordova Plugin Fingerprint Aio
👆 📱 Cordova Plugin for fingerprint sensors (and FaceID) with Android and iOS support
Stars: ✭ 236 (-3.28%)
Mutual labels:  ionic
Ionic Native Mocks
Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules.
Stars: ✭ 207 (-15.16%)
Mutual labels:  ionic
Emoji Picker React
React Emoji Picker
Stars: ✭ 221 (-9.43%)
Mutual labels:  picker
Ionic Theme Editor
A theme editor for Ionic Framework
Stars: ✭ 229 (-6.15%)
Mutual labels:  ionic
Ews Javascript Api
EWS API for TypeScript/JavaScript - ported from OfficeDev/ews-managed-api - node, cordova, meteor, Ionic, Electron, Outlook Add-Ins
Stars: ✭ 241 (-1.23%)
Mutual labels:  ionic
Ionic Firebase Shopping Cart
HTML5 shopping cart using Firebase
Stars: ✭ 236 (-3.28%)
Mutual labels:  ionic

Ion-Multi-Picker

Build Status Dependency Status devDependencies Status npm version npm download

Ion Multi Item Picker--An Ionic2 Custom Picker Component

Simulate IOS multi column picker by ionic2 picker.

For ionic 2.x, please use ion-multi-picker 1.x

Github: https://github.com/raychenfj/ion-multi-picker

NPM: https://www.npmjs.com/package/ion-multi-picker

Preview

Picker with Independent/ Dependent Columns

Picker with Independent Columns Picker with Dependent Columns

Demo

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

Installation

npm install ion-multi-picker --save

Usage

Basic

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.

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' }
      ]
    }
  ];
}

You can use parentVal property to create dependency between each column.

  this.dependentColumns = [
    {
      options: [
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' }
      ]
    },{
      options: [
        { text: '1-1', value: '1-1', parentVal: '1' },
        { text: '1-2', value: '1-2', parentVal: '1' },
        { text: '2-1', value: '2-1', parentVal: '2' },
        { text: '2-2', value: '2-2', parentVal: '2' },
        { text: '3-1', value: '3-1', parentVal: '3' }
      ]
    }];

3.Add ion-multi-picker to your html template.

    <ion-item>
        <ion-label>Simple Picker</ion-label>
        <ion-multi-picker item-content [multiPickerColumns]="simpleColumns"></ion-multi-picker>
    </ion-item>

Note: Don't miss the item-content attribute

Like other ionic components, you can use [(ngModel)] to bind your data.

	<ion-item>
        <ion-label>Default Value</ion-label>
        <ion-multi-picker id="default" [(ngModel)] = "default" item-content [multiPickerColumns]="dependentColumns"></ion-multi-picker>
    </ion-item>

Set disabled to true to prevent interaction.

    <ion-item>
        <ion-label>Disabled Picker</ion-label>
        <ion-multi-picker item-content [multiPickerColumns]="dependentColumns" [disabled]="true"></ion-multi-picker>
    </ion-item>

Using 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.

  1. Use convertEnumToColumns to generate columns;
import { convertEnumToColumn } from 'ion-multi-picker';

enum Fruit {
  Apple, Orange, Melon, Banana, Pear,
}

export class YourPage {
  fruits: any[];
  fruit: Fruit;
  Fruit;

  constructor(public navCtrl: NavController) {
    // Using enum
	this.fruit = Fruit.Melon;
	this.Fruit = Fruit;
	this.fruits = convertEnumToColumn(this.Fruit);
  }
}
  1. Binding enum variable to ngModel;
<ion-item>
	<ion-label>Fruit Picker</ion-label>
	<ion-multi-picker id="fruit" [(ngModel)]="fruit" item-content [multiPickerColumns]="fruits"></ion-multi-picker>
</ion-item>

Value Separator

When there are multiple columns, it need a separator to separate values from different columns.

The separator is space ' ' by default. Now you can customize the separator by using input property [separator].

Instead of define a property in your controller, you can directly pass a string or a char like below:

<ion-multi-picker id="separator" [(ngModel)]="sepVal" item-content [multiPickerColumns]="sepColumns" [separator]="'_'"></ion-multi-picker>

And the multi picker's return value should format like val1_val2_val3.

Parent Column

When use as a dependent picker, by default the dependency sequence is from left to right.

Now with parentCol, you can configure your own dependency sequence when needed, like from right to left.

The picker columns should be configured as below. The parentCol should be another column's name or alias.

    // Using parentCol
    this.parentColumns = [
      {
        name: 'child',
        parentCol: 'parent',
        options: [
          { text: '1-1-1', value: '1-1-1', parentVal: '1-1' },
          { text: '1-1-2', value: '1-1-2', parentVal: '1-1' },
          { text: '1-2-1', value: '1-2-1', parentVal: '1-2' },
          { text: '1-2-2', value: '1-2-2', parentVal: '1-2' },
          { text: '2-1-1', value: '2-1-1', parentVal: '2-1' },
          { text: '2-1-2', value: '2-1-2', parentVal: '2-1' },
          { text: '2-2-1', value: '2-2-1', parentVal: '2-2' },
          { text: '2-2-2', value: '2-2-2', parentVal: '2-2' }
        ]
      },{
        name: 'parent',
        parentCol: 'ancestor',
        options: [
          { text: '1-1', value: '1-1', parentVal: '1' },
          { text: '1-2', value: '1-2', parentVal: '1' },
          { text: '2-1', value: '2-1', parentVal: '2' },
          { text: '2-2', value: '2-2', parentVal: '2' },
        ]
      },{
        name: 'ancestor',
        options: [
          { text: '1', value: '1' },
          { text: '2', value: '2' }
        ]
      }
    ];

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 - - -
separator Optional, charactor to separate value from each column String - space
cancelText Optional, customize the cancel button text String - Cancel
doneText Optional, customize the done button text String - Done
placeholder (since 2.0.2) Optional, set up a placeholder text when there is no option selected String - -
showReset (since 2.1.1) Optional, add an additional reset button next to the cancel button Bool - false
resetText (since 2.1.1) Optional, customize the reset button text String - Reset

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
parentCol Optional, when used as a dependent picker, you can specify the parent column String - previous column
alias Optional, alias for a column, when use parentCol, it will find the column with same name or alias String - -
columnWidth Optional, specify the column width manually, it accepts a string including unit like % and px String - -
  • 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 parent 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 on the example and then in another terminal use npm run e2e to run protractor on project root folder.

You can also add your use case in the app/pages.

Finally, send me a PULL REQUEST.

Acknowledgement

Thanks to HonLuk for sharing the city data in the demo.

License

MIT

Change Log

Change log is here

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].