/ionic-picker-study

:clipboard: App created using the Ionic framework to use the Ion-picker component. Another great tutorial from the Ionic Academy

Primary LanguageTypeScriptMIT LicenseMIT

⚑ Ionic Picker Study

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

πŸ“„ Table of contents

πŸ“š General info

  • Extract from the Ion-picker documentation: A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
  • No extra imported dependencies; picker controller component is part of ionic/angular, picker options component is part of ionic/core. Note: picker buttons components was not used.

πŸ“· Screenshots

image image

πŸ“Ά Technologies

πŸ’Ύ Setup

  • Run npm i to install dependencies
  • Run ng lint to lint files. All files pass linting.
  • To start the server on localhost://8100 type: ionic serve

πŸ’» Code Examples

  • extract from picker.interface.ts file (reached by right-clicking on 'PickerOptions' in home.page.ts and choosing 'go to definition'). Shows how to fill in Picker Column options.
export interface PickerOptions {
    columns: PickerColumn[];
    buttons?: PickerButton[];
    cssClass?: string | string[];
    backdropDismiss?: boolean;
    animated?: boolean;
    mode?: Mode;
    keyboardClose?: boolean;
    id?: string;
    enterAnimation?: AnimationBuilder;
    leaveAnimation?: AnimationBuilder;
}

πŸ†’ Features

  • single and multi-column pickers available.
  • Picker CSS properties can be updated in global.scss file.

πŸ“‹ Status & To-do list

  • Status: Working.
  • To-do: try more of the functionality from the Ion-picker component.

πŸ‘ Inspiration

πŸ“ License

  • This project is licensed under the terms of the MIT license.

βœ‰οΈ Contact