ionic-framework

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

MIT License

Downloads
2.3M
Stars
51K
Committers
500
View Code on GitHub Visit Website View on X
Ecosystems: JavaScript, Ionic, React, Web Components, Angular, Vue.js, TypeScript, Electron, Cordova

Bot releases are visible (Hide)

ionic-framework - 4.1.2

Published by liamdebeasi over 5 years ago

Bug Fixes

ionic-framework - 4.1.1

Published by brandyscarney over 5 years ago

Bug Fixes

  • display: update to correct css classes (cabbeb2)
ionic-framework - 4.1.0 Hydrogen

Published by brandyscarney over 5 years ago

Bug Fixes

Features

ionic-framework - 4.0.2

Published by brandyscarney over 5 years ago

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)
ionic-framework - 4.0.1

Published by brandyscarney over 5 years ago

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
ionic-framework - 4.0.0 Neutronium

Published by manucorporat over 5 years ago

Enjoy! 🎈

ionic-framework - 4.0.0-rc.3

Published by manucorporat almost 6 years ago

Bug Fixes

Features

BREAKING CHANGES

  • NavController.goBack() renamed to NavController.back()
ionic-framework - 4.0.0-rc.2

Published by manucorporat almost 6 years ago

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.

ionic-framework - 4.0.0-rc.1

Published by manucorporat almost 6 years ago

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"
+             }
ionic-framework - 4.0.0-rc.0

Published by manucorporat almost 6 years ago

Bug Fixes

Features

Performance Improvements

  • angular: detach fromn change detection (f613b3b)
ionic-framework - 4.0.0-beta.19

Published by manucorporat almost 6 years ago

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>
ionic-framework - 4.0.0-beta.18

Published by manucorporat almost 6 years ago

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

ionic-framework - 4.0.0-beta.17

Published by manucorporat almost 6 years ago

Bug Fixes

Features

ionic-framework - 4.0.0-beta.16

Published by manucorporat almost 6 years ago

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",
ionic-framework - 4.0.0-beta.15

Published by manucorporat almost 6 years ago

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

Features

Performance Improvements

ionic-framework - 4.0.0-beta.15-0

Published by manucorporat almost 6 years ago

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

Features

Performance Improvements

ionic-framework - 4.0.0-beta.14

Published by manucorporat almost 6 years ago

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

Features

Performance Improvements

ionic-framework - 4.0.0-beta.13

Published by manucorporat about 6 years ago

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)
ionic-framework - 4.0.0-beta.12

Published by manucorporat about 6 years ago

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)
ionic-framework - 4.0.0-beta.11

Published by manucorporat about 6 years ago

Bug Fixes

  • slides: swiper must be a vendor (3435473)
Package Rankings
Top 0.37% on Npmjs.org
Top 3.57% on Proxy.golang.org
Top 20.43% on Repo1.maven.org
Badges
Extracted from project README
version version version version
Related Projects
reactionic

React Ionic: We are looking for a new maintainer!

06 Jan 2016 644