Skip to content

Latest commit

 

History

History
2750 lines (1884 loc) · 220 KB

CHANGELOG.md

File metadata and controls

2750 lines (1884 loc) · 220 KB
Raw

4.11.3 (2019-10-30)

Bug Fixes

  • react: adding change events to iontabs, fixes #19665 (#19711) (b7baf24)
  • react: adding HashRouter to available ion routers, fixes #19621 (#19683) (fcdbb3c)
  • react: checking if node is actually an element before treating it like one, fixes #19769 (#19783) (9d0caf6)
  • react: checking isOpen again after async call before opening overlay, fixes #19755 (f70e71a)
  • react: don't remove current view, provide a better method to determine showGoBack fixes #19731 and #19732 (31c754d)
  • react: removing pages from DOM on nav, fixes #19701 (#19712) (ee21d3a)
  • react: unmount leaving view when using browser back button, fixes #19749 (#19781) (2dc5540)

4.11.2 (2019-10-21)

Bug Fixes

5.0.0-beta.0 (2019-10-15)

Bug Fixes

Features

Performance Improvements

Breaking Changes

We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.

  • all: mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. (#19369) (55462d7)

  • anchor: remove ion-anchor, use ion-router-link instead. (#18935) (e7cd197)

  • card: convert card to shadow. (#19395) (08bb60d)

  • css: responsive display media queries in the display CSS file have been updated. Instead of using the maximum value of that breakpoint (for .ion-hide-{breakpoint}-down classes) the maximum of the media query will be the minimum of that breakpoint. (#18601) (40a8bff)

  • css: remove all CSS utility attributes. Use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities (#18956) (04862df)

    BEFORE:

    <ion-header text-center></ion-header>
<ion-content padding></ion-content>
<ion-label text-wrap></ion-label>
<ion-item wrap></ion-item>

    AFTER:

    <ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>
<ion-label class="ion-text-wrap"></ion-label>
<ion-item class="ion-wrap"></ion-item>

  • events: remove the Events service. (#19600) (8d4a721)

  • header/footer: remove no-border attribute from header/footer, use ion-no-border class instead. (#18954) (d9f6119)

  • menu: iOS menu now defaults to overlay, set type to "reveal" to get the old behavior. (#19063) (ccb54a1)

  • menu-controller: remove swipeEnable(), use swipeGesture() instead. (#19526) (30bd8fd)

  • nav: remove ion-nav-pop, ion-nav-push and ion-nav-set-root. Use ion-nav-link with routerDirection instead. (#19240) (e334d73)

  • searchbar: remove boolean values from showCancelButton, use string values: "always", "focus", "never". (#18953) (508e186)

    BEFORE:

    <ion-searchbar show-cancel-button>
<ion-searchbar show-cancel-button="true">
<ion-searchbar show-cancel-button="false">

    AFTER:

    <ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="never">

  • scss: remove scss files from dist/, use CSS variables to theme instead. (#19292) (6450aff)

  • skeleton-text: remove width property. Use CSS instead. (#18936) (7c3db79)

  • split-pane: remove main attribute. Use contentId instead. (#19511) (02d7841)

    BEFORE:

    <ion-split-pane>
  ...
  <div main>...</div>
</ion-split-pane>

    AFTER:

    <ion-split-pane content-id="main-content">
  ...
  <div id="main-content">...</div>
</ion-split-pane>

  • theming: ionic default colors have been updated. (#19279) (7f4cf08)

  • toast: remove showCloseButton and closeButtonText, add a button using the buttons property with role: 'cancel' instead. (#18957) (ad7f112)

4.11.1 (2019-10-14)

Bug Fixes

4.11.0 Sodium (2019-10-09)

Ionic React! Enjoy! 🧂 🌊 🐼

4.10.3 (2019-10-09)

Bug Fixes

4.10.2 (2019-10-08)

Bug Fixes

4.10.1 (2019-10-07)

Bug Fixes

4.10.0 Neon (2019-09-27)

Bug Fixes

  • angular: add warning if initialized more than once (#19393) (e98769e)
  • animation: set property defaults to avoid inconsistencies (#19321) (1cbb52c)
  • animation: fallback to CSS Animations on older versions of Chrome (#19288) (2d39c07), closes #19272
  • animation: animations of duration 0 now run in Safari (#19287) (4e544f1), closes #19285
  • components: fix crash in IE11 when using classList add() or remove() (#19460) (b4d92c6)
  • components: improve CSS Variable support in IE11 (#19473) (44ad074)
  • content: remove pointer-events from iOS transition shadow (#19471) (8a52c7d), closes #19466
  • menu: menus show proper drop shadows (#19454) (eab0865), closes #19387
  • radio-group: get radios before caching value to avoid infinite loop (#19448) (cf223e4), closes #19277
  • react: update events to use proper types (c79e74b)
  • router-outlet: hide leaving view after transition finishes (#19335) (bfa17d1)

Features

Performance Improvements

  • animation: avoid ngzone with requestAnimationFrame (#19457) (8ca97ce)

4.9.1 (2019-09-16)

Bug Fixes

  • platform: properly detect iPads running iPadOS (#19258) (4a90096)

4.9.0 Fluorine (2019-09-04)

Bug Fixes

Features

  • nav-link: add nav-link and deprecate nav-push, nav-pop, and nav-set-root (#18909) (c3044f5)
  • slides: expose full Swiper API (#19137) (e1fa461)

4.8.1 (2019-08-27)

Bug Fixes

  • animation: enable backwards compatibility for overlay animations (#19160) (fb70980)
  • gesture: account for negative step values with Web Animations (#19196) (b3c7436)
  • ios: clear opacity on toolbar background after iOS transition (#19169) (fa958a5)
  • md: set fill mode on MD transition to both (#19161) (0e8ab49)

4.8.0 Oxygen (2019-08-21)

Bug Fixes

Features

4.7.4 (2019-08-07)

Bug Fixes

  • core: remove extra semicolons being rendered (#19033) (39f0768)

4.7.3 (2019-08-07)

  • core: fix an issue with production builds of @ionic/core

4.7.2 (2019-08-07)

Bug Fixes

4.7.1 (2019-07-26)

Bug Fixes

4.7.0 Nitrogen (2019-07-24)

Angular 8 Support

With this version comes support for Angular 8! Follow the below steps to update.

  1. Update @ionic/angular and @ionic/angular-toolkit to the latest releases:

    $ npm install @ionic/[email protected]
$ npm install @ionic/[email protected] -D

  2. Update @angular/core and @angular/cli:

    $ npx ng update @angular/core @angular/cli

  3. Update @angular-devkit dependencies:

    $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

View our Angular 8 Update Guide for tips on potential issues!

Bug Fixes

Features

Performance

  • angular: attach entering view before first change detection and detach leaving page (#18821) (97fec92)

4.6.2 (2019-07-10)

Bug Fixes

  • menu-button: hide menu button when auto hide or split pane (#18702) (24840d4), closes #18666
  • menu-button: move font-size to host for easier customization (#18699) (876ab41), closes #18667
  • overlays: fallback to step color if overlay background variable is unset (#18709) (f16b118), closes #18658
  • virtual-scroll: remove runOutsideAngular error (#18752) (8beeff2), closes #18746
  • vue: update imports for types and ionicons (f56fea6), closes #18701

Performance Improvements

4.6.1 (2019-07-09)

Bug Fixes

  • app: add hydrated to hide white screen with multiple ionic dependencies (#18649)
  • datetime: datetime no longer reports having a value if none is set (#18541) (92e0f98), closes #17979 #18540
  • fab-button: set opacity on disabled fab button (#18685) (6042b39), closes #18682
  • icon: load icons properly with baseHref (#18650), (#18637)
  • icon: bind icon name properly (#18707)
  • infinite-scroll: fix scroll listener (0d58101)
  • item: do not disable entire item if there are multiple inputs (#18696) (dfa2b13), closes #18655 #18670
  • router-link: add missing target prop (#18659) (1f51ab2), closes #18655
  • router-outlet: fix swipe to go back (b69fb69)
  • scss: copy all scss files (36a58df)
  • searchbar: proper styling after navigating (#18642)
  • slides: use correct order for pushing slides dynamically (#18633)
  • tabs: select proper tab by default and do not emit tab change if selectedTab is undefined (03c834c)
  • overlay: make create opts optional (44c88ad)

Performance Improvements

4.6.0 Carbon (2019-06-26)

Bug Fixes

Features

Enhancements

  • stencil: update to Stencil One to improve app performance 🎉🎊 (b40f7d3)

4.5.0 Boron (2019-06-12)

Bug Fixes

  • angular: ensure all NavigationExtras values are preserved when navigating (#18468) (7610787), closes #18469
  • button: set opacity on the host element for disabled button (#18509) (320719b), closes #16965
  • button: use correct border-radius on menu and back button (#18501) (055e125), closes #17624
  • button: use correct size on a dynamic button in an item (#18395) (a3e23fc), closes #18085
  • card: remove white space from bottom of card (#18328) (d53e7aa)
  • content: prevent ion-searchbar from receiving padding adjustment when keyboard is open (#18008) (b2290a6), closes #18007
  • datetime: recalculate time columns on change (#18380) (292b24a)
  • item: start align the content under stacked and floating labels (#18379) (f0af707), closes #16375
  • item: inherit overflow to allow better customization (#18502) (8d2a47e), closes #17670
  • item: use a step color if the activated background is not set (#18450) (1899c13), closes #18449
  • item-sliding: use the correct gesture direction and side for rtl (#18366) (4545100), closes #17012
  • label: include the ion-text-wrap class styles for larger font (#18374) (4bba540)
  • platform: prevent error with Platform.is on Android 4.4 (#18387) (54bdb36)
  • react: ensure element exists in controller before dismissing it (0fd3e5d)
  • slides: resolve issue where double tap to zoom was enabled by default (10de1da), closes #18035
  • tabs: allow selection on enter and spacebar press (#18381) (11cde99), closes #18363
  • textarea: inherit white-space for better customization (#18508) (a583902), closes #18495
  • virtual-scroll: do not crash with an empty cell list (#17799) (20c146e)

Features

4.4.2 (2019-05-22)

Bug Fixes

  • angular: account for query params and fragments within a string when navigating (#18356) (b79f68a)

4.4.1 (2019-05-22)

Bug Fixes

4.4.0 Beryllium (2019-05-08)

Bug Fixes

Features

4.3.1 (2019-04-26)

Bug Fixes

  • angular: support replaceUrl with angular <7.2 (#18106) (eb3cbe4)
  • security: sanitize components using innerHTML (#18146) (b839e6f)

4.3.0 Lithium (2019-04-17)

Bug Fixes

Features

4.2.0 Helium (2019-04-03)

Bug Fixes

Features

4.1.2 (2019-03-20)

Bug Fixes

4.1.1 (2019-03-07)

Bug Fixes

  • display: update to correct css classes (cabbeb2)

4.1.0 Hydrogen (2019-03-06)

Bug Fixes

Features

4.0.2 (2019-02-20)

Bug Fixes

  • button: show proper shade for activated button on ios (#17508) (3a9b679), closes #17436
  • config: update types for scrollPadding, inputBlurring and hideCaretOnScroll to boolean (#17302) (39fbc32)
  • datetime: default to current date when no value given (#17443) (644f9f4)
  • item-sliding: Sliding no longer breaks after removing an item (#17492) (e27bb2e)
  • range: implement RTL (from PR 17157) (#17384) (4f203bc), closes #17012
  • searchbar: allow setting of toolbar color and searchbar color (#17474) (ba4e117)
  • select: Account for when options are not loaded immediately (#17405) (f9f1775)
  • tab-bar: add translucent tab-bar styles back (#17376) (374bd77)

4.0.1 (2019-02-06)

Bug Fixes

  • build: modify rollup.config.js to work with Windows (#17231) (d26d43d)
  • grid: add flex to ion-grid to allow it to properly render in an ion-item (#17258) (40c6955), closes #17075
  • menu: fix content shadow when revealed in iOS (#17383) (fc43faa)
  • platform: add additional check for safari PWA (a584f6e)
  • platform: add mobileweb platform back (cf2b2b3)
  • popover: apply fixed position to keep backdrop in viewport (#17352) (ee3b04a), closes #17337
  • popover: originate animation from right in RTL/MD (#17381) (bc3aa21)
  • range: chrome bug with will-change (74ce34f)
  • react: duplicate events being fired in ionic/react (#17321) (a415001)
  • reorder: capture click event (#17244) (986e67b), closes #17241
  • searchbar: hide search icon when focused with cancel button (#17260) (c87867c), closes #17252

4.0.0 Neutronium (2019-01-23)

Enjoy! 🎈

4.0.0-rc.3 (2019-01-22)

Bug Fixes

Features

BREAKING CHANGES

  • NavController.goBack() renamed to NavController.back()

4.0.0-rc.2 (2019-01-16)

Bug Fixes

Features

Reverts

  • test: update avatar index.html (9e80b73)

BREAKING CHANGES

ionChange removed from ion-tabs

  • (ionChange) becomes (ionTabsDidChange)

ion-tabs getSelected() returns a string

Previously the getSelected() method of ion-tabs returned a reference to the selected ion-tab, now it returns the name of tab as string.

4.0.0-rc.1 (2019-01-09)

Bug Fixes

Features

  • radio-group: add missing implementation for property allowEmptySelection (#16880) (09726b0), closes #16841
  • react: add missing simple components to react. (#16836) (696f62c)
  • react: create initial portal implementation for overlay ctrls (#16830) (99bdd1f)
  • react: Initial implementations of controller required elements. (#16817) (e30c5f1)

Performance Improvements

BREAKING CHANGES

In order to speed up the build and reduce the main bundle size, we have moved the ionicons outside the webpack build pipeline.

Instead, a new copy task needs to be added to the angular.json, specifically to the the "assets" option of the "build".

angular.json

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
+             {
+               "glob": "**/*.svg",
+               "input": "node_modules/ionicons/dist/ionicons/svg",
+               "output": "./svg"
+             }

4.0.0-rc.0 (2018-12-19)

Bug Fixes

Features

Performance Improvements

  • angular: detach from change detection (f613b3b)

4.0.0-beta.19 (2018-12-14)

Bug Fixes

Features

BREAKING CHANGES

Core Components

Removes the --width and --height variables from the following components, in favor of CSS:

  • Button
  • FAB Button
  • Checkbox
  • Removes the --width/--height and adds a --size variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
  • Radio
  • Removes the --width/--height and --inner-width/--inner-height variables. Calculates inner values based on parent element size.

Overlay Components

The following components have all been converted to shadow (or scoped) and have CSS variables for width/height:

  • Action Sheet (scoped)
  • Alert (scoped)
  • Loading (scoped)
  • Menu (shadow)
  • Modal (scoped)
  • Picker (scoped)
  • Popover (scoped)
  • Toast (shadow)

The above components will now have the following CSS variables for consistency among overlays:

Name
--height
--max-height
--max-width
--min-height
--min-width
--width

If the component does not set the value, it will default to auto.

Removed CSS Variables

The following CSS properties have been removed:

Component Property Reason
Button --height Use CSS instead
Button --margin-bottom Use CSS instead
Button --margin-end Use CSS instead
Button --margin-start Use CSS instead
Button --margin-top Use CSS instead
Button --width Use CSS instead
Checkbox --height Use CSS or --size
Checkbox --width Use CSS or --size
FAB Button --width Use CSS instead
FAB Button --height Use CSS instead
FAB Button --margin-bottom Use CSS instead
FAB Button --margin-end Use CSS instead
FAB Button --margin-start Use CSS instead
FAB Button --margin-top Use CSS instead
Menu --width-small Use a media query and --width
Radio --width Use CSS instead
Radio --height Use CSS instead
Radio --inner-height Calculated based on parent
Radio --inner-width Calculated based on parent

FAB Button mini

Renamed [mini] attribute to [size=small] in ion-fab-button.

- <ion-fab-button mini></ion-fab-button>
+ <ion-fab-button size="small"></ion-fab-button>

4.0.0-beta.18 (2018-12-13)

Bug Fixes

Features

BREAKING CHANGES

[ANGULAR] Tabs

Tabs got the last bit of changes needed in order to support lazy loading of components. To support this, some changes are required for the router config. Using the tabs starter as an example, here's a diff of the changes:

 import { RouterModule, Routes } from '@angular/router';

 import { TabsPage } from './tabs.page';
-import { Tab1Page } from '../tab1/tab1.page';
-import { Tab2Page } from '../tab2/tab2.page';
-import { Tab3Page } from '../tab3/tab3.page';

 const routes: Routes = [
   {
     path: 'tabs',
     component: TabsPage,
     children: [
-      {
-        path: '',
-        redirectTo: '/tabs/(tab1:tab1)',
-        pathMatch: 'full',
-      },
       {
         path: 'tab1',
-        outlet: 'tab1',
-        component: Tab1Page
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab1/tab1.module#Tab1PageModule'
+          }
+        ]
       },
       {
         path: 'tab2',
-        outlet: 'tab2',
-        component: Tab2Page
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab2/tab2.module#Tab2PageModule'
+          }
+        ]
       },
       {
         path: 'tab3',
-        outlet: 'tab3',
-        component: Tab3Page
+        children: [
+          {
+            path: '',
+            loadChildren: '../tab3/tab3.module#Tab3PageModule'
+          }
+        ]
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full'
       }
     ]
   },
   {
     path: '',
-    redirectTo: '/tabs/(tab1:tab1)',
+    redirectTo: '/tabs/tab1',
     pathMatch: 'full'
   }
 ];

And for the tabs markup, we have something close to pre-beta 16 tabs, but still provides a custom tab-bar.

 <ion-tabs>

-  <ion-tab tab="tab1">
-    <ion-router-outlet name="tab1"></ion-router-outlet>
-  </ion-tab>
-  <ion-tab tab="tab2">
-    <ion-router-outlet name="tab2"></ion-router-outlet>
-  </ion-tab>
-  <ion-tab tab="tab3">
-    <ion-router-outlet name="tab3"></ion-router-outlet>
-  </ion-tab>
-
   <ion-tab-bar slot="bottom">
-
-    <ion-tab-button tab="tab1" href="/tabs/(tab1:tab1)">
+    <ion-tab-button tab="tab1">
       <ion-icon name="flash"></ion-icon>
       <ion-label>Tab One</ion-label>
     </ion-tab-button>

-    <ion-tab-button tab="tab2" href="/tabs/(tab2:tab2)">
+    <ion-tab-button tab="tab2">
       <ion-icon name="apps"></ion-icon>
       <ion-label>Tab Two</ion-label>
     </ion-tab-button>

-    <ion-tab-button tab="tab3" href="/tabs/(tab3:tab3)">
+    <ion-tab-button tab="tab3">
       <ion-icon name="send"></ion-icon>
       <ion-label>Tab Three</ion-label>
     </ion-tab-button>
-
   </ion-tab-bar>

 </ion-tabs>

[ANGULAR] href does not cause Angular Router to navigate

For consistency sake, the href attribute of ion-button, ion-item and ion-anchor no longer trigger navigation using the Angular’s Router,instead use angular’s [routerLink]:

- <ion-button href="/path/to/page">
+ <ion-button routerLink="/path/to/page">

This change will not affect SEO since ionic will still use href under the hood.

[ANGULAR] Prefixed Ion- components

For consistency with other frameworks and the rest of APIs and tooling, the exported ionic components are prefixed with Ion.

- import { Input } from '@ionic/angular';
+ import { IonInput } from '@ionic/angular';

This change might also help to improve autocompletion, and prevent collisions with other libraries.

More info

4.0.0-beta.17 (2018-11-29)

Bug Fixes

Features

4.0.0-beta.16 (2018-11-16)

BREAKING CHANGES

Segment Button now requires the text to be wrapped in an ion-label element for improved styling.

Old usage:

<ion-segment-button>
 Item One
</ion-segment-button>

New usage:

<ion-segment-button>
 <ion-label>Item One</ion-label>
</ion-segment-button>

Simplifying Chip

Because of updates to the Material Design spec, ion-chip no longer requires a chip-specific version of ion-icon or ion-button. Chips themselves should be interactive and don't require a nested button.

Old usage:

<ion-chip>
  <ion-chip-icon name="checkmark"><ion-chip-icon>
</ion-chip>

New usage:

<ion-chip>
  <ion-icon name="checkmark"></ion-icon>
</ion-chip>

Bug Fixes

Features

Performance Improvements

  • angular: remove duplicated code in value-accessor (bfbbeca)

Dependencies

If you are using @ionic/angular, please update the version number of any @angular packages in your package.json file to 7.0.3.

"dependencies": {
  "@angular/common": "~7.0.3",
  "@angular/core": "~7.0.3",
  "@angular/forms": "~7.0.3",
  "@angular/http": "~7.0.3",
  "@angular/platform-browser": "~7.0.3",
  "@angular/platform-browser-dynamic": "~7.0.3",
  "@angular/router": "~7.0.3",
  "rxjs": "6.3.3",

"devDependencies": {
  "@angular-devkit/architect": "~0.10.5",
  "@angular-devkit/build-angular": "~0.10.5",
  "@angular-devkit/core": "~7.0.5",
  "@angular-devkit/schematics": "~7.0.5",
  "@angular/cli": "~7.0.3",
  "@angular/compiler": "~7.0.3",
  "@angular/compiler-cli": "~7.0.3",
  "@angular/language-service": "~7.0.3",

4.0.0-beta.15 (2018-11-01)

Breaking Changes

Removed Global CSS Variables

The following global CSS variables have been removed for the reasons listed.

Variable Name Reason
--ion-toolbar-color-inactive Unused
--ion-ripple-background-color Unused / Ripple color is based on component
--ion-header-size Removed in favor of using CSS for h1-h6
--ion-header-step Removed in favor of using CSS for h1-h6

Renamed Global CSS Variables

The following global CSS variables have been renamed for the reasons listed.

Old Variable Name New Variable Name Reason
--ion-toolbar-text-color --ion-toolbar-color Variable is not limited to text color
--ion-toolbar-color-active --ion-toolbar-color-activated Consistency with our component variables
--ion-tabbar-text-color --ion-tab-bar-color Variable is not limited to text color
--ion-tabbar-text-color-active --ion-tab-bar-color-activated Consistency with our component variables
--ion-tabbar-background-color --ion-tab-bar-background Applies to the background property
--ion-tabbar-background-color-focused --ion-tab-bar-background-focused Applies to the background property
--ion-item-background-color --ion-item-background Applies to the background property
--ion-item-background-color-active --ion-item-background-activated Applies to the background property / Consistency with our component variables
--ion-item-text-color --ion-item-color Variable is not limited to text color
--ion-placeholder-text-color --ion-placeholder-color Consistency with other variables

Rethinking Tabs

One of the most valuable and complex components in Ionic's toolkit is Tabs. Tabs started off as a simple component that would create a tabbed interface to allow users to switch between different views in a way that was consistent with native UX paradigms.

Over time, we started hearing people ask for more features to be added: "Can we have one tab button that is just a button?" "Can I customize how the tab buttons are displayed?" "Can I use a custom icon in the tab?"

Traditionally, these features, and many others, were difficult to accomplish because Tabs was doing a lot of magic behind the scenes to generate the Tab bar and buttons. With this in mind, we thought it was time for a refresh to offer as much flexibility as possible within Tabs.

In order to do this, we had to change how Tabs were written in an app. Prior to Beta 14, Tabs would look like this:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Here, we have an ion-tab element that accepts an icon, a label, and a link to navigate to as properties. This is pretty much how Tabs have worked all the way back to Ionic 1. In Beta 14, we've removed some of the magic from Tabs which allows for more customization:

<ion-tabs>
  <ion-tab-bar>

    <!-- No ion-tab, just a link that looks like a tab -->
    <ion-tab-button href="https://ionicframework.com">
      <!-- <a href="https://ionicframework.com"> -->
      <ion-icon name="globe"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <!-- No ion-tab, just a button that looks like a tab -->
    <ion-tab-button (click)="openCamera()">
      <ion-icon name="camera"></ion-icon>
      <ion-label>Photo</ion-label>
    </ion-tab-button>

    <!-- Connected to ion-tab, on click will show the ion-tab with id home-view -->
    <ion-tab-button tab="home-view">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-tab tab="home-view">
    <ion-content></ion-content>
    <!-- or -->
    <ion-nav></ion-nav>
    <!-- or -->
    <ion-router-outlet></ion-router-outlet>
  </ion-tab>

</ion-tabs>

There's a lot going on here, so let's break it down:

  1. A single parent ion-tabs wraps the entire layout. Same as before.
  2. A new element, ion-tab-bar, creates the Tab Bar which will contain buttons.
  3. A new element, ion-tab-button, is used to create each button in the Tab Bar. These could be static links to different routes, buttons with click handlers on them, or link to whole tab views.
  4. The ion-tab component becomes a separate container that has inline content (ion-content), a navigation component (ion-nav) or a router outlet (ion-router-outlet).

To connect the ion-tab-button to the ion-tab, the tab property must be added to both of these components. For example:

<ion-tabs>
  <ion-tab-bar>
    <ion-tab-button tab="home-view"></ion-tab-button>
  </ion-tab-bar>

  <ion-tab tab="home-view"></ion-tab>
</ion-tabs>

Since the tab property is the same on the ion-tab-button and ion-tab, when the Tab Button is tapped, the home-view Tab will become active. This takes the magic out of Tabs while making the behavior between the tab buttons and the views much more explicit.

Some other benefits of this refactor include:

  • Can now be written as a standalone Tab Bar (with no attached Tab)
  • Works with a navigation component or a plain content element
  • Works with shadow DOM and allows easy customization of the Tab Bar
  • Gives full control over the elements inside of the Tab Bar
  • Integrates nicely with other frameworks that have different ways of rendering element nodes

Lastly, this change also fixes some outstanding issues with Tabs, so we're excited to get this out to you all!

Bug Fixes

Features

Performance Improvements

4.0.0-beta.13 (2018-10-14)

Bug Fixes

  • all: avoid using focus() since it conflicts with HTMLElement (5560dcd), closes #15810
  • all: disable animations in e2e tests (9d109d6)
  • all: docs for all missing props (a72fced)
  • angular: add "main" to package.json as workaround for webstorm (c57a7cc)
  • angular: backButton event uses ionBackButton (0337c7f)
  • angular: only bypass zone in high-rate events (f63c0f5), closes #15765
  • button: use class instead of reflect (e189cc6), closes #15623
  • card: include card-header in current color (b5e39c8)
  • card: update currentColor to use contrast color (a9a29f7)
  • card-header: get color property working (92514b3), closes #14723 #14853
  • col: fix CSS is undefined error on IE11 (#15882) (06a3028)
  • content: iOS should not have scroll in desktop (8cb1886), closes #15858
  • css: avoid cleancss bug (f87d4bf), closes #15807
  • css: remove selection color (6b0d812)
  • docs: Fix commit link on CONTRIBUTING.md (#15834) (fe0c3b4)
  • fab-button: add and document css properties (098bd82), closes #14808
  • fab-button: ripple-effect in safari (844c33a), closes #15768
  • hide/show: fix show-when/hide-when (fd01308), closes #15813
  • infinite-scroll: implements position="top" (b4a73ad), closes #15481
  • input: add and document custom properties (23df042), closes #14850
  • input: tabindex or tab in ion-input do not work with clearInput fix (e916500)
  • ion-datetime: keep the model value consistently an ISO string (#15907) (b46052b)
  • item: add input highlight using an absolute div (#15856) (f885f7d), closes #14036 #9639 #14952 #15690
  • item: detail context based in text color (e51f1f3)
  • label: add color variable, examples to test and document (b485eba), closes #14853 #14850
  • list: don't show inset lines for full line list (6eae95a)
  • menu: menu registers itself before it's ready (08beee3)
  • menu: overlays can block menu closing (11aa241), closes #15880
  • menu: wait until all menus are ready (a5c2cc1), closes #15727
  • menu-button: color (386cf82), closes #15546 #15545
  • menu-button: Not visible if toolbar has primary color (#15847) (e2ea08b)
  • modal/popover: lifecycle events (19c449e), closes #15806
  • picker: stop animation when it's closed (e81af2d), closes #15854
  • popover: showBackdrop hides backdrop (f00be0d), closes #15878
  • reorder-group: delegate dom reordering (5f65942), closes #15836
  • slides: disable autoplay by default (db6ddb0), closes #15766
  • tabbar: css variables assigned to the host (545db2e)
  • tabs: badgeColor works again (3d98587), closes #15559 #14840
  • tabs: fix async deadlock (905c7db)
  • title: allow color to be set for title without attribute (a9b3064), closes #14853 #14850
  • toggle: improve animation motion (5330574)

Features

  • angular: observer based api to override hardware back button (6a5aec8), closes #15820
  • menu: add new lifeycle events (64b52b5)
  • nav: animation is customizable (24f3373), closes #15851
  • overlays: expose animation customization (dc976cc)
  • initial vue support (73cff0c)

Performance Improvements

  • prevent unnecesary event listener changes (a999c1f)

4.0.0-beta.12 (2018-09-26)

Bug Fixes

  • action-sheet: allow async button handler returned value (3d3e6a4)
  • alert: check if value is null instead of truthy (799f0d7), closes #15420
  • all: gesture controller can block scrolling (633360f), closes #15725
  • all: lint errors (f8eafa7)
  • all: safe margins for fab, item-header, tabbar (62eff0a)
  • angular: add event listener on window (#15628) (7bd33a7)
  • angular: import icons using webpack apis (b71b36c)
  • angular: ionic/core is only a dep (236d8a4)
  • angular: value is updates based in ionChange (e18f8bf), closes #15722
  • app: statusTap and hardwareGB can be activated with config (c048f9f), closes #15617
  • back-button: add and document custom properties (b3aebb8), closes #14808 #14850 #14853
  • back-button: default md color is inhered (d0867b5)
  • button: default button width to auto to avoid inheriting (bac49ca), closes #15522
  • button: disable :hover on non supported devices (#15705) (67eb661)
  • button: disable pointer events in toolbar buttons (d145cae), closes #15623
  • buttons: fix activated, position, animation (9d6169a)
  • color: do not accept empty color (ede5525), closes #15732
  • content: apply background to the inner scroll element (f68c457), closes #15635
  • content: nested content (5f5ba66), closes #15680
  • datetime: check for null instead of undefined (407b147), closes #15605
  • datetime: convert to shadow and fix broken styles (fa77017), closes #15547 #14850
  • fab: do not reset fab activated if it's false (d619d8d)
  • gestures: change itemSliding gesture priority (48927e6), closes #15608
  • input: fix text type for select change event (694b6a8)
  • item: add the multiple inputs class to fix select/datetime in item (1cd792e), closes #15401
  • item-divider: add and document custom properties (06cb138), closes #14850 #14808
  • item-option: add and document custom properties (2a040e0), closes #14850 #14808 #14943
  • menu: crash when menu if forcedClosed (22e15b4)
  • menu: opening a menu autocloses any opened ones (8796f9f)
  • menu-controller: expose registerAnimation (29d00da), closes #15701
  • overlay: register backbutton handler only when needed (#15615) (b2b5d93), closes #15601
  • platform: using desktop instead of window (c8de84d)
  • add safe area cutouts (#15750) (a3c85ae)
  • radio: add css variables to make it customizable (9ec8e74), closes #15729
  • select: add position styles to work as standalone (224b4f8)
  • select: placeholder can be reset if value = null (602f668)
  • select: show placeholder when multiple is empty (29862e8)
  • select-popover: add scoped to apply proper styles to list (fd1b636)
  • slides: add back zoom plugin for swiper (6890ecc), closes #15676
  • slides: fix mutable options (681981f)
  • tap-click: prevent activated while scrolling (7f38d37), closes #15752
  • toast: button color is contrast (f65ec10), closes #15737

Features

  • animation: ability to disable animations w/ querystring (734b222)
  • app: adds _forceStatusbarPadding for ionic lab (0379977)
  • ripple: ability to disable ripple effect w/ querystring (efca0ae)
  • screenshot: update to use stencil e2e screenshot testing (43b9045)

Reverts

  • content: block scrolling in ion-content (9badb08)

4.0.0-beta.11 (2018-09-14)

Bug Fixes

  • slides: swiper must be a vendor (3435473)

4.0.0-beta.10 (2018-09-14)

Bug Fixes

  • animation: always call onFinish() (c23c5a4)
  • button: vanilla color is usable (b8b9b83)
  • segment: unselected color (b9e42eb)
  • slides: swiper is not required as dependency (29f324b)

4.0.0-beta.9 (2018-09-14)

Bug Fixes

  • anchor: make it activatable (6c62e6c)
  • angular: only append the component when the parent element is not the container element (6d6f70c), closes #14737
  • back-button: subscribe to body (37c9be7)
  • button: add custom properties and remove --ion-color overrides (#15463) (3af4361), closes #14808 #14853 #14850
  • core: matchBreakpoint will return true if breakPoint is empty string (#15498) (b362b0a), closes #15495
  • esm: reorganiza exports (bb19243)
  • fab-button: add routerDirection (2398634), closes #15551
  • input: value might be null/undefined (83543b7)
  • item: update hostContext to use ion-item element (21d1f2e)
  • item-option: add activated and ripple to button (78e2a0a), closes #14943
  • item-option: enable ripple-effect (428a5da)
  • item-sliding: make sure options are ready (7f59f91)
  • list-header: add and document custom properties (5ccc1fd), closes #14850 #14853 #14808
  • menu: ios styles (281f9a3)
  • nav: matches() function (9420b88)
  • overlay: animation can be interrupted (ca58664), closes #15506
  • overlay: only register backButton listener once (75c2d74)
  • popover: content sizing, scoped css (51d4e08), closes #15237 #15589 #15331
  • popover: remove unneeded code (b26c017)
  • radio: add and document custom properties (0f9a7b4), closes #14850
  • range: update range ratio when new min/max are passed (#15512) (f62601f), closes #15511
  • searchbar: add and document custom properties (7f57e02), closes #14850
  • searchbar: inherit color from color toolbar (3042f57)
  • searchbar: ionCancel event (20a7599), closes #15476
  • segment: fix css var + host-context() (49ab065)
  • slides: correct order of parameters (6442dfc), closes #15407
  • slides: Methods wait for execution until swiper is initialized (#15576) (ea01900)
  • slides: Update swiperOptions default to match version 4 of Swiper (#15578) (db35af2)
  • slides: Updated lockSwipes methods to match the new swiper.js API (#15469) (efb99cb)
  • sliding-item: swipe event (127da1a)
  • test: treeshake check runs last (b56f136)
  • test: workaround for nav tests (a4b1179)
  • toast: adds role timeout and cancel (2f2a255), closes #15477
  • toast: render on top (ac42180)
  • toggle: empty hidden input value when not checked (1f19862)
  • handle failure in hardware back button (6da765b)
  • remove argument-less catch() (ff919de)

Features

  • angular: integrate back-button with ng router (1bcca01)
  • app: hardware back button support (dfac9dc)
  • overlays: close overlay with back-button (4ccbefa)
  • router: add support for relative paths (b28aeab), closes #15499
  • virtual-scroller: add support (d40d0a7)

    Performance Improvements

    • router: prevent initializaing page twice (3dd9604)
    • slides: tree-shake dependency (9d3a259)

    4.0.0-beta.8 (2018-09-06)

    Bug Fixes

    • button: add custom properties and remove --ion-color overrides (#15463) (3af4361), closes #14808 #14853 #14850
    • menu: ios styles (281f9a3)
    • radio: add and document custom properties (0f9a7b4), closes #14850
    • searchbar: inherit color from color toolbar (3042f57)
    • slides: correct order of parameters (6442dfc), closes #15407
    • test: treeshake check runs last (b56f136)
    • test: workaround for nav tests (a4b1179)
    • toggle: empty hidden input value when not checked (1f19862)

    Features

    • angular: integrate back-button with ng router (1bcca01)
    • app: hardware back button support (dfac9dc)
    • overlays: close overlay with back-button (4ccbefa)
    • virtual-scroller: add support (d40d0a7)

      4.0.0-beta.7 (2018-08-30)

      Bug Fixes

      4.0.0-beta.6 (2018-08-29)

      Breaking Changes

      • All methods of all ionic components return a promise.
      • colors.css has been renamed to core.css, the global stylesheet needs to be updated:

      Stencil

      + @import "~@ionic/core/css/core.css";
  @import "~@ionic/core/css/normalize.css";
  @import "~@ionic/core/css/structure.css";
  @import "~@ionic/core/css/typography.css";
- @import "~@ionic/core/css/colors.css";

  @import "~@ionic/core/css/padding.css";
  @import "~@ionic/core/css/float-elements.css";
  @import "~@ionic/core/css/text-alignment.css";
  @import "~@ionic/core/css/text-transformation.css";
  @import "~@ionic/core/css/flex-utils.css";

      Angular

      + @import "~@ionic/angular/css/core.css";
  @import "~@ionic/angular/css/normalize.css";
  @import "~@ionic/angular/css/structure.css";
  @import "~@ionic/angular/css/typography.css";
- @import "~@ionic/angular/css/colors.css";

  @import "~@ionic/angular/css/padding.css";
  @import "~@ionic/angular/css/float-elements.css";
  @import "~@ionic/angular/css/text-alignment.css";
  @import "~@ionic/angular/css/text-transformation.css";
  @import "~@ionic/angular/css/flex-utils.css";

      Bug Fixes

      4.0.0-beta.5 (2018-08-27)

      Bug Fixes

      • Ionic/angular compiler error

      Breaking Changes

      NavController

      Changes are required to accommodate some new useful routing APIs and match the ng router ones closely:

      goForward() -> navigateForward()
goBack() -> navigateBack()
goRoot() -> navigateRoot()

      Dependencies

      The following dependencies need to be updated to resolve build errors

      • Update Angular to 6.1 or higher
      • Update Typescript to 2.9.2
        • "typescript": "~2.9.2"

      4.0.0-beta.4 (2018-08-27)

      Bug Fixes

      • alert: remove unneeded warning (8447f28)
      • all: add customization of font-style (c957ea6)
      • angular: back navigation and back-button play better (#15293) (9ddfb1b), closes #15290
      • angular: expose router.navigate() (7aa4f13), closes #15332
      • app: --ion-safe-area-right typo (77ca2bd)
      • app: listen statusTap event (dc82675)
      • app: statusbarPadding config is a boolean (b387de4)
      • build: do not export in component modules (da2dc7b)
      • buttons: margin between buttons (359c47f)
      • card: remove calculated width to work with dynamic margin (059d365), closes #15223
      • chip: add and document custom properties (07e99a1), closes #14850 #14853 #14808
      • config: scrollAssist boolean definition (#15203) (2af72fa)
      • config: using sessionStorage is not safe (091b433)
      • content: document and add custom properties (0372aec), closes #14850 #14808 #14853
      • content: fix scroll events (962578e), closes #15244
      • content: scrollToPoint reliability (e0f1259), closes #15257
      • datetime: allow values to be zero (#14480) (e0b8e24)
      • docs: add missed menu title in the list (#15300) (5f3c7cd)
      • docs: use shape property to get round buttons (#15321) (d4c812f)
      • docs: use shape property to get round buttons (#15322) (5c6fe45)
      • hide-when: mode is a reserved property (c446d1b)
      • img: add object-fit to the host to avoid skewing the inner img (2e94227)
      • infinite-scroll: remove unused method (926758e)
      • input: clearInput works in device (ac96705), closes #15319
      • menu: do not override --ion-color-base (a890828)
      • modal: make sure content is ready (2c8bc04), closes #14969
      • nav: remove nav-decor once transition finished (b8a87fb), closes #15121
      • note: do not overide --ion-color-base (5f90dbf)
      • overlay: expose "animated" API (8b768fb), closes #14775
      • overlays: dismiss last overlay (c1c5102)
      • overlays: esc button works closed top overlays (c567a82), closes #14662
      • picker: tune scrolling speed (bd75bf4)
      • platform: better detect platforms + css API (3ffa3cd), closes #15165 #15116
      • popover: make sure content is ready (8bf60e7)
      • popover: they should not below other overlays (d83e7f8), closes #14662
      • refresher: tune threshold (d129f62), closes #15233
      • ripple-effect: add and document custom properties (37a149c), closes #14850
      • segment: add and document custom properties (08c6c97), closes #14850 #14808 #14854
      • select: add and document custom properties (88613ff), closes #14850
      • select: random type in generated.d.ts (11edc49)
      • select: support any kind of value (151c58e), closes #15200
      • skeleton-text: add and document custom properties (b213500), closes #14850
      • slides: document custom properties (ecf1eb8), closes #14850
      • split-pane: add and document custom properties (9104850), closes #14850
      • textarea: remove autocomplete prop (5989f15)
      • title: mode is inherited (94ea0a6), closes #15187
      • toggle: cursor: pointer in desktop (86acb8c)
      • toolbar: add position relative to host for toolbar background (ac2db9f), closes #15193
      • transition: cleanup transition (70a38ac), closes #15317
      • virtual-scroll: update VS when items change (3adfb98)

      Features

      Performance Improvements

      • overlay: prevent layout thrashing (ed5c8eb)
      • ripple-effect: using requestIdleCallback (ea1c3d4)

      4.0.0-beta.3 (2018-08-16)

      Bug Fixes

      Features

      4.0.0-beta.2 (2018-08-08)

      Bug Fixes

      Features

      Performance Improvements

      • app: move app css to global css (a71f382)
      • menu: flickering (8253b04)
      • scroll: filter velocity using exponential moving window (419ef7b)

      4.0.0-beta.1 (2018-08-01)

      Bug Fixes

      • accesibility: boolean aria-* properties (4f9cbfe)
      • all: strong type text fields (1d001a3)
      • all: updated tslint rules to latest (92e21a8)
      • angular: events (7a0545d), closes #14866
      • angular: ion-router-outlet exposes animated (266336e), closes #14913
      • angular: pass proper animated value (7813acc)
      • app: statusbarPadding (fd8f875)
      • app: user-select on desktop (8a1ad1d)
      • button: do not change border radius if round button in toolbar (#14941) (ad006dd), closes #7661
      • button: improve text style inherency (25423a0), closes #14927
      • button: submit forms using fake button (c05d672), closes #14890 #14786
      • color: make desktop selection beautiful (0cdb500)
      • config: avoid using startWith for IE support (73a9f14), closes #14922
      • content: bottom padding (be4eda5)
      • fab: add styles for disabled (520da8d), closes #14867
      • flex-utils: add missing flex attributes (7c12e1b)
      • input: add color support for ion-input (f676f98), closes #14864
      • inputs: better customization for placeholder color (517104f)
      • item: only use pointer cursor for and (f19553f)
      • pointer-events: listening to document (afb0906)
      • refresher: default to disabled false, add to breaking changes (f1826a6), closes #14879
      • router-outlet: fix stack attribute detection (#14921) (16e992a)
      • searchbar: fix input bluring (d65174b), closes #14916
      • slides: update events to match swipers (fc0d4c0), closes #14865
      • title: can be used nested (d1969bd), closes #14905
      • title: support color (7da0ac4)

      Features

      Performance Improvements

      • app: tap-click is a ES (b0ac5ba)
      • css: always emit compressed css (143f0f0)
      • gesture: lazy loaded dynamic ES module (49cac8b)
      • icon: disable icon lazy loading when it's not needed (7292fc7)

      4.0.0-beta.0 (2018-07-25)

      Enjoy! 🎉

      Bug Fixes

      • angular: always dispatch lifecycle events (5677daa)

      4.0.0-alpha.14 (2018-07-25)

      Bug Fixes

      • angular: hide pages properly (a44b844)
      • angular: make pages invisible before they are rendered (a589816)
      • transition: make sure hidden is removed (f52dece)

      4.0.0-alpha.13 (2018-07-24)

      Bug Fixes

      • css: revert hidden css (7d3d98d)
      • tab: prevent infinite loop (05b258c)
      • toolbar: remove transparent border on translucent toolbar (55cb354)

      4.0.0-alpha.12 (2018-07-24)

      Bug Fixes

      • all: accesibility and global styles for hidden nodes (4b844ef)
      • checkbox: get css variable customization working better (3e7aa4b)
      • content: set height to make it accessible for children elements (#14772) (857b42d)
      • grid: set the flex and width to auto when size is auto (ba30671), closes #14807
      • inputs: inputs work inside (8324bd1)
      • label: style color (5c0e9e6)
      • list: hide the last item border when there are no lines (#14770) (26f7379), closes #14769
      • margin: adds css variables (f6c8f3f), closes #14798 #14826
      • menu-button: fix sass linting (d22f04b)
      • menu-button: get proper styles when used inside ion-buttons (811eee7)
      • modal: use flex to position modal to make it easier to size (9488a98), closes #14392
      • overlay: remove global css vars in overlays for local ones (38b1e47)
      • refresher: find parent ion-content properly (4eab209), closes #14833
      • slides: swiper container should take up 100% height (1d201ec), closes #14771
      • spinner: color can be customized in non-shadow-dom (65008e7)
      • spinner: get paused attribute working and update tests (3ab1e2d), closes #14811

      Features

      4.0.0-alpha.11 (2018-07-16)

      Bug Fixes

      • anchor: add proper styling, support for colors, and basic test (1dbf5bb), closes #14777
      • anchor: inner inherits text styles (9aedfc6)
      • button: add box-sizing so anchor buttons won't exceed max-width (9c9f081), closes #14760
      • button: set display type on host (89d1526)
      • button: submit form w/ ion-button within shadow dom (4ed8541), closes #14776
      • item: add cursor pointer back to native item (43f1fec), closes #14743
      • searchbar: use tag in toolbar context selector (124b87c)
      • segment: add styles for in a color toolbar (d9e4ca7)
      • spinner: style CSS props (2798bb0)
      • tab: props are reactive (00c4c77)
      • tab-button: add a class to hide the tab when show is false (eb9ed17)
      • tabs: add the colors to the tabbar as well (5348e7c), closes #14758
      • tabs: fix the tabs so the color property works on tab button (8aed3bf), closes #14758
      • virtual-scroll: read viewport size for every scroll event (1d3eb3f)

      4.0.0-alpha.10 (2018-07-11)

      Bug Fixes

      • angular: publish css to npm (748c209)
      • item: pass the correct type property to the button tag (5f8b02e), closes #14740
      • tabs: correct alignment for label/icon only tabs (b46c3e2)
      • tabs: update the tabbar placement value to match the property it applies to (45583bc)
      • toolbar: get translucency working with header, footer and toolbar (f6ab5b6)

      4.0.0-alpha.9 (2018-07-10)

      Bug Fixes

      4.0.0-alpha.8 (2018-07-09)

      Bug Fixes

      • angular: avoid TS 2.8 features (c736bac)
      • angular: correct subscription to cordova ready event (#14577) (5967352)
      • bundling: fix EventEmitter import (8e47101)
      • linting (e629e29)
      • icon: target element for style and add to breaking (949d93e)
      • overlay: make type an any (15dc651)
      • router: fix reuse strategy (bd53bba)
      • scripts: update github release notes (fc078af)
      • tabs: align tab title and icons to flex-start (c11d74b), closes #14606

      Features

      • all: custom icons (e6638e7)
      • dir: default to ltr css, rtl overrides w/ [dir=rtl] selectors (fb4353c)
      • slides: update swiper to latest (8e164d6)

      4.0.0-alpha.7 (2018-05-17)

      Bug Fixes

      • all: strong typing for color (618f708)
      • angular: platform logic belongs to core (af5db2f)
      • angular: build script (a88e1e8)
      • angular: params are assigned to props (7fa6e43)
      • angular: populated the platforms array (#14466) (d177087)
      • angular: Required<> is not available (8aa6965)
      • angular: routerLink integration (ed8ff4f)
      • content: scrol-inner takes all height (3da0c98)
      • nav: Remove console.log (#14467) (d93b1d5)
      • refresher: adds threshold (34ae904)
      • router: accepts root direction (ae9d0c7)
      • router: fix push() public interface (875b9d0)

      Features

      • img: adds lazy load image (b06c65f)

      4.0.0-alpha.6 (2018-05-10)

      Bug Fixes

      4.0.0-alpha.5 (2018-05-10)

      Bug Fixes

      • alert: onDidDismiss() is called (7b33039)
      • all: snapshot tests (cc7ab4e)
      • angular: exports (50021cd)
      • angular: routerLink uses (526c9a8)
      • angular: setup config provider correctly (82fbe31)
      • angular: unexport some es2017 js (f7bcb68)
      • app: fix the statusbar-padding to match new structure (6c2d539)
      • back-button: fix position (e00da6d)
      • capacitor: detect capacitor native (23d86eb)
      • hover: remove ion-app .enable-hover css (a939fa2)
      • inputs: interactive css to rule all them (1bd5467)
      • refresher: move gesture target to content (df2faa4)
      • router: change events when URL changes (ece86ee)
      • router: dynamic redirects (ba551fd)
      • router: route information is stateless (0f8477d)
      • snapshot: using md mode (e352d1b)
      • theming: update contrast colors (ae1028d)
      • virtual-scroll: JSX can render headers and footers (012127d)
      • virtual-scroll: linting (df8a4f7)

      Performance Improvements

      4.0.0-alpha.4 (2018-04-30)

      Bug Fixes

      • angular: compare router params length (b3a9c7f)
      • angular: Config provider (329a348)
      • angular: platform.ready() returns type (c0ec02e)
      • angular: update proxies (da0bfc7)
      • config: add object.entries polyfil (c917a3c)
      • config: add setupConfig util (0c1476e)
      • lint: import order (8b1452c)
      • nav: rename animate to animated (98a3519)
      • prerender: router compatible with prerender (9c7b0ca)
      • router: error when it can't initialize property (e56b2ee)
      • router: initial load waits until outlet attaches (c905ba4)
      • router: root prop (89d5a35)
      • router: writeURL() for non root base (af4bcb8)
      • scripts: github release (545d3c2)
      • segment: checked can be changed dynamically (78454b4)
      • select: cssClass + strong typed (826e02b)
      • toast: only use constant and env if supported (#14399) (9bee0f0)
      • validate: fix type errors (3328314)

      Features

      • router: add willChange event (d613411)

      4.0.0-alpha.3 (2018-04-23)

      Bug Fixes

      • all: strong typed events (d5129df)
      • angular: adds missing events (c929dad)
      • angular: Config provider (c87f0c5)
      • angular: platform ready() (2b3c14b)
      • overlay: cssClasses applied to overlay (43d7538)
      • prerender: local references to window/document (78bd146)
      • virtual-scroll: queue.write (c1cbbc5)

      Features

      • angular: animation is explicit (099b3ed)

      Performance Improvements

      • platform: remove from critical path (86a6cde)

      4.0.0-alpha.2 (2018-04-13)

      Bug Fixes

      • angular: add NavParams (22ebbce)
      • angular: change detection in deep ViewContainers (850d7fc)
      • angular: emit es5 code (02c1e83)
      • angular: icon proxy (db5313e)
      • angular: router-outlet uses stack by default (5c91101)
      • angular: using es2017 types (12a27bc)
      • angular: viewContainer in overlays (8ad3df9)
      • back-button: get the back button color working (5f4250b)
      • fab: fix fab activation (a203534)
      • label: inline position by default (fde878b)
      • label: using prop for position (b1ee4b8), closes #14288
      • mode: set mode css class on ion-app (fcb08e1)
      • props: update stencil (ea24ad6)
      • react: FrameworkDelegate matches API (e40a6b0)
      • toast: account for safe-area on ios (d984214)

      Features

      • angular: adds DomController (6a31f39), closes #14286
      • angular: push/setRoot/pop (4d23cba)
      • DomController: add DomController provider using stencil queue (bceece7)
      • queue: use stencil's queue controller for dom read/writes (d623b3b)
      • router: dont reuse the component if the params are different (5899b03)
      • routerDirection: refactors goBack (54d7a12)

      4.0.0-alpha.1 (2018-04-06)

      Bug Fixes

      0.2.2 (2018-04-05)

      Bug Fixes

      • back-button: fix menu and back button alignment (#14268) (57fbf6c)
      • ripple-effect: animation (25c852c)
      • sass: add missing alert css properties (#14269) (3471dd6), closes #14258
      • script: release script pushes tags (d23108a)
      • scripts: improve script (2215c6a)
      • select: pass header and subHeader to interfaces (2195895)
      • select: wrap the text for the message in a popover (0a0959b)

      0.2.1 (2018-04-04)

      Bug Fixes

      • angular: back button prevents default (4db687e)
      • angular: back-button (1f78390)
      • angular: back-button does not push view (bb46b5f)
      • angular: tabs flickering (7e97006)
      • app: hide elements (11cb42f)
      • scripts: update dep version (974b949)

      Features

      • angular: href integration (09e6b7e)

      0.2.0 (2018-04-02)

      Bug Fixes

      • angular: URL based tabs (14fedb9)

      0.1.6 (2018-04-02)

      Bug Fixes

      • angular: lifecycles (062641d)
      • angular: modal and popover (acd411d)
      • angular: module exports (cece447)
      • angular: proxies (2308239)
      • angular: tabs angular tests (ff1ed88)
      • router-outlet: enteringEl !== leavingEl (0d44253)
      • router-outlet: mutable prop (ff06dab)

      0.1.5 (2018-03-29)

      Bug Fixes

      • all: absolute positioning (4fcddad)
      • angular: goback navigation (7b9a00e)
      • angular: ion-back-button (9c789ce)
      • angular: stack based navigation (726938f)
      • avatar: adjust wide images to fill instead of squish (b0f8ca5)
      • back-button: empty text is a valid value (eb0ff2f)
      • back-button: ios style (2b8e489)
      • button: dynamic bar-button (d0c5f53)
      • checkbox: update ios checkbox to be closer to native (b29fce1)
      • components: add font-smoothing to mixing components (9caeec7)
      • covers: absolute positioning (ce09978)
      • item-option: remove outline on active/focus (eae6869), closes #14191
      • label: add missing text-wrap styles for ios (a9bd76a), closes #13157
      • menu: default menu mode (c31bcde)
      • nav: animated opts (57a5d49)
      • nav: no animation (4fdfddb)
      • nav: transition name (011a374)
      • picker: do not scroll (1c06bfe)
      • ripple-effect: tapclick is required in ionic (d57122c)
      • router: change detection for componentProps (a718f7e)
      • router: explicit goback should not push (7a26162)
      • router: fixes navChanged() (dddaee1)
      • router: ion-nav (113af9e)
      • router: loging (ffaec16)
      • router: route change detection (9e9f2a2)
      • router: wait RAF (b26a563)
      • slides: unload slides correctly (59c6891)
      • thumbnail: adjust wide images to fill instead of squish (54558c9)
      • toast: dismiss timeout (44f343d)
      • toolbar: unused private (c9d2a0d)
      • transition: nav ios transition (095f9c8)

      Features

      • button: goback attribute (00fc460)
      • config: add set to config (69a6f8d)
      • content: scrollEnabled (5c2678f)
      • menu-controller: expose registerAnimation (153f8ca)
      • nav: goBack directive (862e571)
      • nav-controller: goback best guess (46bbd0f)
      • ripple: css variable color (77fc792)
      • tab: framework support (48d1bd4)

      Performance Improvements

      • app: platform is not needed (e681836)

      Reverts

      • toolbar: revert to use old button attributes (574c346), closes #14172

      0.1.4 (2018-03-21)

      Bug Fixes

      • action-sheet: update padding on title to match native (f0a40fa)
      • alert: update colors for alert text and input borders (605ec93), closes #14196
      • alert: update md alert to closer match spec (7d53e49)
      • all: ts strict (part 4) (4693229)
      • angular: router-outlet animation (943e2f7)
      • chip: use lighter background color (08553f1), closes #14196
      • picker: does not scroll (b49a45d)
      • router: reusing checks params (371fc19)
      • router-outlet: css and change logic (6e683c5)

      Features

      • fab: add box shadow and transition for ios (d26074a)
      • ion-router-outlet: adds router-outlet (c03afab)

      0.1.4-9 (2018-03-20)

      Bug Fixes

      • all: ts strict (part 3) (06ad60e)
      • angular: ion-nav no routing (9094c66)
      • angular: removeViewFromDom (41f54f8)
      • back-button: use correct color for ios back button (b82c382), closes #14177
      • overlays: page is removed properly (9988c75)
      • theming: update spinner classes to new names (f578122)

      Features

      0.1.4-8 (2018-03-19)

      Bug Fixes

      • back-button: apply the proper color to the back button (7d2de18), closes #14177

      Features

      • nav: support for rootParams (50abcf5)

      0.1.4-7 (2018-03-16)

      Features

      • router: wildcard redirects (2bdf4ad)

      0.1.4-6 (2018-03-15)

      Bug Fixes

      • alert: backdrop calls cancel handler (de22eca)
      • alert: set input value (6e2a9c9)
      • angular: create angular delegate (3b5f758)
      • angular: fix overlays (cc4fecc)
      • angular: modal and popover support (9a0755a)
      • demos: fixes angular (f398b3a)
      • overlay: using hostData for zIndex (64f0866)
      • overlay: wrong stencil import (22f6a34)
      • overlays: OverlayController interface (6e2ca85)
      • popover: lifecycles (b56c2a8)
      • router: ambiguous routes (b4f46ee)
      • router: fix selection (207f416)
      • router: rename API to match stencil-router (e729610)
      • router: retuning string path (f48d817)
      • toggle: ios shadow (7df023a)

      Features

      • ion-router: dynamic routes (7c3cba0)
      • overlay: adds lifecycle events (0b099ce)
      • overlays: adds onDidDismiss and onWillDismiss (7dcf8a5)

      Performance Improvements

      0.1.4-5 (2018-03-09)

      Bug Fixes

      Features

      • router: adds redirectTo (f5c6333)

      0.1.4-4 (2018-03-08)

      Bug Fixes

      • back-button: implements back animation (64a787a)
      • route: params is not undefined (8b6df5a)

      0.1.4-3 (2018-03-08)

      Bug Fixes

      • router: passing params to ion-nav (d1263a8)

      Features

      • back-button: adds defaultHref (5271f68)
      • nav: params (878d7e6)
      • route: adds route-link (4a3030f)
      • router: reverse lookup with params (3ce8a67)

      0.1.4-2 (2018-03-07)

      Bug Fixes

      • fab: add side as a property for fab list (7387d34)
      • ion-router: fixes routing algorithm (c8a27b7)
      • item: href (540c33b)
      • overlays: bundling of overlays (9650bec)
      • router: invalid url (c7fe694)
      • routing: flickering (part 1) (7b264f9)
      • tabs: do not select when using router (174d9b5)

      Features

      • router: adds parameters (f29e3f4)
      • virtual-scroll: adds JSX support (dc8b363)

      0.1.4-1 (2018-03-07)

      Bug Fixes

      • ion-router: fixes routing algorithm (c8a27b7)
      • overlays: bundling of overlays (9650bec)
      • routing: flickering (part 1) (7b264f9)
      • tabs: do not select when using router (174d9b5)

      Features

      • virtual-scroll: adds JSX support (dc8b363)

      0.1.4-0 (2018-03-06)

      Refactor

      • Refactored navigation system

      Bug Fixes

      • testing: do not throw error for missing Ionic global (aa91d11)
      • zone: forgot to remove console.logs (4ec3e48)

      0.1.3 (2018-03-03)

      Performance Improvements

      • Updates to latest stencil, that includes the zone bypassing abilities.

      Bug Fixes

      0.1.2 (2018-03-03)

      Performance Improvements

      • events: bypass ngzone (7366c38)
      • scroll: watchdog + simplification (33a6274)

      Bug Fixes

      • scroll: clearInterval just to be safe (6da9882)

      0.1.1 (2018-03-01)

      Bug Fixes

      • button: pass the property type instead of hardcoding button (10e481a)

      0.1.0 (2018-03-01)