Skip to content

Releases: ionic-team/ionic-framework

4.0.0 Neutronium

23 Jan 17:39
@manucorporat manucorporat
v4.0.0
ad0c8a4
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0 Neutronium

Enjoy! 🎈

Loading

4.0.0-rc.3

22 Jan 20:42
@manucorporat manucorporat
v4.0.0-rc.3
b0aabc2
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-rc.3

Bug Fixes

Features

BREAKING CHANGES

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

4.0.0-rc.2

16 Jan 16:21
@manucorporat manucorporat
v4.0.0-rc.2
5447404
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-rc.2

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.

Loading

4.0.0-rc.1

09 Jan 16:55
@manucorporat manucorporat
v4.0.0-rc.1
a30f760
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-rc.1

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"
+             }
Loading

4.0.0-rc.0

19 Dec 16:04
@manucorporat manucorporat
v4.0.0-rc.0
45b2e5c
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-rc.0

Bug Fixes

Features

Performance Improvements

  • angular: detach fromn change detection (f613b3b)
Loading

4.0.0-beta.19

14 Dec 22:42
@manucorporat manucorporat
v4.0.0-beta.19
7366677
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-beta.19

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 be 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>
Loading

4.0.0-beta.18

13 Dec 16:41
@manucorporat manucorporat
v4.0.0-beta.18
a27fdc3
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-beta.18

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

Loading

4.0.0-beta.17

29 Nov 18:07
@manucorporat manucorporat
v4.0.0-beta.17
e402766
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-beta.17

Bug Fixes

Features

Loading

4.0.0-beta.16

16 Nov 18:38
@manucorporat manucorporat
v4.0.0-beta.16
6318da6
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-beta.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": "~0.7.5",
  "@angular-devkit/schematics": "~0.7.5",
  "@angular/cli": "~7.0.3",
  "@angular/compiler": "~7.0.3",
  "@angular/compiler-cli": "~7.0.3",
  "@angular/language-service": "~7.0.3",
Loading

4.0.0-beta.15

01 Nov 18:56
@manucorporat manucorporat
v4.0.0-beta.15
9b33e28
This commit was signed with the committer’s verified signature. The key has expired.
manucorporat Manu MA
GPG key ID: F933974022402A5E
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
4.0.0-beta.15

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://beta.ionicframework.com”>
      <!-- <a href=”https://beta.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

Read more
Loading