A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

  • By Ionic
  • Last update: Sep 12, 2022
  • Comments: 17

Ionic

Ionic

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.

Ionic is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.

Ionic Framework is released under the MIT license. PRs welcome! Follow @IonicFramework Official Ionic Discord

Quickstart · Documentation · Contribute · Blog
Community: Discord · Forums · Twitter

Packages

Project Package Version Downloads Links
Core @ionic/core version NPM Downloads README.md
Angular @ionic/angular version NPM Downloads README.md
Vue @ionic/vue version NPM Downloads README.md
React @ionic/react version NPM Downloads README.md

Looking for the ionic-angular package? Ionic 3 has been moved to the ionic-v3 repo. See Earlier Versions.

Getting Started

Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using our framework, please file an issue on this repository.

Migration Guides

Already have an Ionic app? These guides will help you migrate to the latest versions.

Examples

The Ionic Conference App is a full featured Ionic app. It is the perfect starting point for learning and building your own app.

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Future Goals

As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.

Earlier Versions

The source code for earlier versions of the Ionic Framework may exist in other repositories. Please open issues and pull requests in their respective repositories.

Github

https://github.com/ionic-team/ionic-framework

Comments(17)

  • 1

    Speed up initial loading

    We're developing an app which is partially native and partially hybrid. We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back. Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

  • 2

    Ionic 4 won't work in android 5

    Bug Report

    Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

    Ionic:
    
       ionic (Ionic CLI)          : 4.1.1 (/Users/myname/.nvm/versions/node/v9.4.0/lib/node_modules/ionic)
       Ionic Framework            : @ionic/angular 4.0.0-beta.3
       @angular-devkit/core       : 0.7.4
       @angular-devkit/schematics : 0.7.4
       @angular/cli               : 6.1.5
       @ionic/ng-toolkit          : 1.0.6
       @ionic/schematics-angular  : 1.0.5
    
    Cordova:
    
       cordova (Cordova CLI) : 8.0.0
       Cordova Platforms     : android 7.0.0, browser 5.0.4
       Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)
    
    System:
    
       Android SDK Tools : 26.1.1 (/Users/myname/Library/Android/sdk/)
       NodeJS            : v9.4.0 (/Users/myname/.nvm/versions/node/v9.4.0/bin/node)
       npm               : 6.4.0
       OS                : macOS High Sierra
    

    Describe the Bug When I do ionic serve and open it in Android Lollipop's browser, Its giving below error. Uncaught SyntaxError: Use of const in strict mode. vendor.js:71605

  • 3

    bug: White flash appearing when switching between tabs on Android

    Type: bug

    Platform: android 4.4 webview

    when switching between tabs ONLY on Android platform, the app show a white flash. This is in 1.0.0 stable. Not using crosswalk. Forum post http://forum.ionicframework.com/t/white-flash-appearing-when-switching-between-tabs-on-android-in-1-0-0-stable/24774

  • 4

    WIP: virtual scroll

    @robdmoore if you wanna test, here it is so far

    Test in /test/html/list-fit.html

    TODO:

    • [x] unit tests
    • [x] docs
    • [x] grid
    • [x] cleanup on $destroy
    • [x] one more run of optimizations
    • [x] errors on bad developer usage
    • [x] allow user to input item size
    • [x] fix visual bug while scrolling back up/left
    • [x] fix transclusion bug while scrolling down
  • 5

    issue(forms): Input, scrolling, keyboard issues for forms

    Right now, the way Ionic handles form input can be better. Ionic 1 had awesome defaults for form inputs with regards to keyboard handling, content scrolling, etc. Ionic 2 needs to be made consistent, and more importantly, work properly for form inputs consistently across all platforms (iOS, Android, Windows).

    See this repo for the code example which should be run on devices: https://github.com/dylanvdmerwe/ionic2-formtest

    Android:

    • [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
    • [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
    • [x] 3. Touching an area that is not an input dismisses the keyboard.
    • [ ] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
    • [x] 5. ~~Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.~~ [unable to test as cannot get a keyboard with next and prev buttons]
    • [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

    iOS:

    • [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
    • [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
    • [x] 3. Touching an area that is not an input dismisses the keyboard.
    • [x] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
    • [ ] 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.
    • [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

    Note that this issue has nothing to do with forms or inputs in a slidescomponent. That would be a seperate consistency check to perform.

    Which Ionic Version? 2.x

    Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0-beta.4-201604170622 Ionic CLI Version: 2.0.0-beta.24 Ionic App Lib Version: 2.0.0-beta.14 OS: Node Version: v5.7.0

  • 6

    bug: infdig Infinite $digest Loop

    Type: bug

    Platform: ios 9 webview

    I tried my app on iOS9 Beta and always receive this error, when i click something (e.g. a tab):

    angularjs exception: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] caused by "undefined js stack:

  • 7

    bug: Keyboard pushes the whole screen up

    Type: bug

    Ionic Version: 2.x

    Platform: ios 9 webview

    My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

  • 8

    Ionic2 - nav.setRoot(Component) - Works only first time, unable to navigate after, no errors reported

    Short description of the problem:

    I am developing an app with Ionic2. I have App.ts as the parent, Welcome.ts as a child page and Featured.ts as a child page as well. I have firebase integrated with the app. Rootpage is first set to Welcome.

    this.rootPage = Welcome;
    

    Step 1: I click a button on Welcome to authenicate with Google, once onAuth is called, I set this.nav.setRoot(Featured); All works fine up to now. I get to the Featured page which enables a sidemenu with different pages and i am able to navigate to all of them no problem.

    Step 2: Featured enables a sidemenu from App.ts/html, in there I have a logout button that calls unauth. Unauth does some Firebase unauth and then:

    this.menu.close();    
    let nav = this.app.getComponent('nav');    
    nav.setRoot(Welcome); 
    

    Step 3: Login again same as in step 1. All is fine up to now.

    Step 4: Open side menu, selects any of the pages from the sidemenu, navigation doesn't occur. sidemenu closes but page remain the same, navbar icon button disappear and no navigation occurs. openPage code:

      openPage(page) {
        //1. Loop through and set active attribute to False if it doesn't match.
        //   Set to True if it matches page title
        for(var i = 0; i < this.NavPages.length; i++) {
          if(this.NavPages[i].title == page.title) this.NavPages[i].active = true;
          else this.NavPages[i].active = false;
        }
        for(var i = 0; i < this.ActivityPages.length; i++) {
          if(this.ActivityPages[i].title == page.title) this.ActivityPages[i].active = true;
          else this.ActivityPages[i].active = false;
        }
        for(var i = 0; i < this.PreferencesPages.length; i++) {
          if(this.PreferencesPages[i].title == page.title) this.PreferencesPages[i].active = true;
          else this.PreferencesPages[i].active = false;
        }
    
        //2. close the menu when clicking a link from the menu
        this.menu.close();
        //3. navigate to the new page if it is not the current page
        let nav = this.app.getComponent('nav');
        nav.setRoot(page.component);
      }
    

    What behavior are you expecting?

    I am expecting navigation to continue to occur, similar to what happens in step 1.

    Steps to reproduce: Steps to reproduce included above.

    Code included above.
    

    Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) No error is being thrown unfortunately. I don't see any erros in the console logs.

    Which Ionic Version? 2.x

    Run ionic info from terminal/cmd prompt: (paste output below)

    Your system information:
    
    Cordova CLI: 6.0.0
    Gulp version:  CLI version 3.9.0
    Gulp local:   Local version 3.9.1
    Ionic Version: 2.0.0-beta.3
    Ionic CLI Version: 2.0.0-beta.19
    Ionic App Lib Version: 2.0.0-beta.9
    ios-deploy version: 1.8.2 
    ios-sim version: 5.0.3 
    OS: Mac OS X El Capitan
    Node Version: v0.12.7
    Xcode version: Xcode 7.2.1 Build version 7C1002 
    

    Thank you.

  • 9

    Keyboard Issues

    Ionic version: (check one with "x") [ ] 1.x [x] 2.x [x] 3.x

    I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

    Current behavior:

    Keyboards and input scrolling have long been a challenge for Ionic apps, even going all the way back to Ionic V1. We have recently put a focus on trying to knock out these keyboard issues. The issues we currently think are the highest priority when it comes to keyboards and inputs are the following:

    • inputs in alerts are sometimes "wonky"
    • Forms that have a lot of inputs sometimes have scrolling issues when focusing inputs lower down on the page
    • Switching between inputs, textareas and more sometimes causes "bouncing" and other weird UI issues
    • Having an input locked to the bottom of a view does not work correctly on iOS (the keyboard covers the input)

    We are currently working on a two-pronged approach of modifying the logic in the framework that handles this stuff (mainly for Android) along with some modifications to the WKWebView plugin to fix these issues for iOS. We are at a point now where we have a branch of the WKWebView plugin that has the fixes for iOS and are ready for our community to start testing this and providing feedback. We have made a Google doc here that has instructions on how this can be tested. We would love to have feedback on these fixes! Feel free to provide feedback as a comment to this issue. Thanks for using Ionic everyone!

  • 10

    Ionic 2 storage doesn’t have query method

    I'm updating my app to Ionic 2 rc0 and using import {Storage} from "@ionic/storage"; But it doesn't have query method. It was there in beta 11 to query SQLite. How to query SQLite in rc0?

  • 11

    Memory leak in state change

    It appears that changing state increases memory usage with every transition. Here's a simple example. Open your browser's memory profiler and click "Get Clicky".

    http://codepen.io/perrygovier/pen/FJgBa

    Pages with more stuff on it tend to increase the amount of memory that gets eaten with each transition. Note the number of nodes and listeners never decreases.

    screen shot 2014-04-09 at 5 31 45 pm

    On my app that uses a few larger lists, the app can quickly get to 200mb after just a few mins of manual clicking back and forth. I have yet to crash the app due to memory pressure, but it seems more a matter of impatience than something that wouldn't happen with continued use.

    I believe this is less an issue with Ionic and more to do with Angular's UI Router, but I thought I'd start here as it's where it popped up for me.

    BountySource discussion that appears related

  • 12

    fix(animation): improve compatibility with ssr

    Pull request checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
      • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
    • [x] Build (npm run build) was run locally and any changes were pushed
    • [x] Lint (npm run lint) has passed locally and any fixes were made for failures

    Pull request type

    Please check the type of change your PR introduces:

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    What is the current behavior?

    Issue URL: resolves https://github.com/ionic-team/ionic-framework/issues/25987

    What is the new behavior?

    • Animation util only does feature detection on the window if it is defined.

    Does this introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

  • 13

    fix(footer, tab-bar): element does not flicker when keyboard is closing

    Pull request checklist

    Please check if your PR fulfills the following requirements:

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
      • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
    • [x] Build (npm run build) was run locally and any changes were pushed
    • [x] Lint (npm run lint) has passed locally and any fixes were made for failures

    Pull request type

    Please check the type of change your PR introduces:

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    What is the current behavior?

    Issue URL: resolves https://github.com/ionic-team/ionic-framework/issues/25990

    What is the new behavior?

    Does this introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

  • 14

    bug: Tab bar is unhidden too quickly after keyboard dismiss

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [X] v6.x
    • [ ] Nightly

    Current Behavior

    When the keyboard is dismissed the tab bar temporarily flashes on the screen as it is unhidden before the webview has expanded back to the full size of the viewport.

    https://user-images.githubusercontent.com/76167627/191752633-e4068d12-a205-421b-9005-ba5194948679.mp4

    Expected Behavior

    The tab bar should not be unhidden until the web view has expanded back to its full size so that the tab bar does not flash in the center of the screen.

    Steps to Reproduce

    Use the default capacitor keyboard config:

    // capacitor-config.ts
    Keyboard: {
        resize: KeyboardResize.Native,
        resizeOnFullScreen: true,
    },
    

    This happens on any page with an IonTabBar.

    Code Reproduction URL

    No response

    Ionic Info

    Ionic:

    Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.2.8

    Capacitor:

    Capacitor CLI : 4.3.0 @capacitor/android : not installed @capacitor/core : 4.3.0 @capacitor/ios : 4.3.0

    Utility:

    cordova-res : not installed globally native-run : 1.7.0

    System:

    NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.7.0 OS : macOS Monterey

    Additional Information

    No response

  • 15

    feat: allow specifying a time along with multiple date selection

    Prerequisites

    Describe the Feature Request

    The ion-datetime component allows to select a date and a time in the same view. Since Ionic 6.2, selecting multiple dates is possible, but the time selection is not possible in that case in the same datetime input, meaning the time selection must be created in another datetime component with presentation="time".

    Could we allow time selection when selecting multiple dates with multiple="true"?

    Describe the Use Case

    One typical use case is selecting a recurring event that occur at a set time (eg. shifts every day from Mon-Fri that start at 9.30)

    Describe Preferred Solution

    <ion-datetime
      [multiple]="true"
      [value]="[['2022-06-03', '2022-06-13', '2022-06-29'], '09:30']"
    ></ion-datetime>
    

    Note the absence of the presentation="date" attribute in the above example.

    Describe Alternatives

    No response

    Related Code

    No response

    Additional Information

    No response

  • 16

    bug: Ionic 6 / Angular 14 / SSR - TypeError: Cannot redefine property: constructor

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [X] v6.x
    • [ ] Nightly

    Current Behavior

    Hi! Am trying to add SSR to my app. When trying to serve using npm run serve:ssr , I was experiencing list of errors for window and self properties. After which I added, domino and assigned window and self variables as defined in this older bug - https://github.com/ionic-team/ionic/issues/21001. In fact this older also mentions about the error I am seeing now on my repo - https://github.com/sgcharan/TradAssistUI/tree/ssr.

    TypeError: Cannot redefine property: constructor at Function.defineProperty () at C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:8856 at xa (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:8952) at Window. (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:16246)
    at Object.9833 (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:16475) at webpack_require (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:5163844) at Function.webpack_require.t (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:5164183)
    at _ZoneDelegate2.invoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:3574934) at Object.onInvoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:4147282) at _ZoneDelegate2.invoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:3574830)

    Expected Behavior

    Expecting my app to load fine without the errors from main.js / polyfills js

    Steps to Reproduce

    code base causing issue - https://github.com/sgcharan/TradAssistUI/tree/ssr

    Code Reproduction URL

    No response

    Ionic Info

    ionic info
    [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
    

    Ionic:

    Ionic CLI : 6.20.1 (C:\Users\sgcha\AppData\Roaming\npm\[email protected]\cli) Ionic Framework : @ionic/angular 6.2.8 @angular-devkit/build-angular : 14.2.3 @angular-devkit/schematics : 14.2.3 @angular/cli : 14.2.3 @ionic/angular-toolkit : 6.1.0

    Capacitor:

    Capacitor CLI : 4.2.0 @capacitor/android : 4.2.0 @capacitor/core : 4.2.0 @capacitor/ios : not installed

    Utility:

    cordova-res : not installed globally native-run : 1.7.0

    System:

    NodeJS : v16.15.0 (C:\Program Files\nodejs\node.exe) npm : 8.5.5 OS : Windows 10

    Additional Information

    No response

  • 17

    fix(datetime): date and time picker accessibility

    Pull request checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
      • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
    • [x] Build (npm run build) was run locally and any changes were pushed
    • [x] Lint (npm run lint) has passed locally and any fixes were made for failures

    Pull request type

    Please check the type of change your PR introduces:

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    What is the current behavior?

    Picker Internal:

    • The input mode applies to all columns, regardless of which is active. e.g. When the time picker is opened, typing "24" will activate minute "24", even though the hour column is the first active column.

    Datetime has several accessibility issues:

    • The icon in the month/year dropdown is announced to screen readers
    • Previous, current and next calendar months are announced to screen readers (e.g. non-visible months are read)
    • Users cannot navigate focus easily from the calendar body to the time picker
    • Time picker does not announce value changes to screen readers
    • Time picker does not announce total available options in each column
    • Time picker does not announce the type of column being focused

    Issue URL: Internal

    What is the new behavior?

    Picker Internal

    • The input mode behavior only applies to the focused column. e.g.: When the time picker is opened, typing "24" will not activate minute 24. Since the hour column is the focused column, first "2" will be focused and then hour "4" will be focused, since the hour column does not have an item for "24".

    Accessibility

    • The icon in the month/year dropdown is not announced to screen readers
    • Only the active month is announced to screen readers
    • Users can easily navigate from the calendar body to the time picker
    • Time picker announces value changes to screen readers
    • Time picker announces the total number of items available in each column
    • ~~Time picker announces the type of column being focused (e.g. "5 o'clock" or "10 minutes")~~

    Does this introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

    Date picker

    |Before|After| |------|------| |||

    Outdated - shows announcement of selected item on focus (but interferes with input mode)