Skip to content

Releases: ionic-team/ionic-framework

4.0.0-beta.15-0

31 Oct 19:26
@manucorporat manucorporat
v4.0.0-beta.15-0
be51187
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-0

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

4.0.0-beta.14

31 Oct 16:53
@manucorporat manucorporat
v4.0.0-beta.14
8eacad2
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.14

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

4.0.0-beta.13

14 Oct 16:49
@manucorporat manucorporat
v4.0.0-beta.13
4945993
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.13

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

4.0.0-beta.12

26 Sep 19:03
@manucorporat manucorporat
v4.0.0-beta.12
6ea6d53
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.12

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

4.0.0-beta.9

14 Sep 19:35
@manucorporat manucorporat
v4.0.0-beta.9
005d7c8
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.9

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

4.0.0-beta.11

14 Sep 22:26
@manucorporat manucorporat
v4.0.0-beta.11
573117a
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.11

Bug Fixes

  • slides: swiper must be a vendor (3435473)
Loading

4.0.0-beta.10

14 Sep 21:41
@manucorporat manucorporat
v4.0.0-beta.10
94aaa33
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.10

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

4.0.0-beta.7

30 Aug 17:12
@manucorporat manucorporat
v4.0.0-beta.7
db1dbd4
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.7

Bug Fixes

Loading

4.0.0-beta.6

29 Aug 18:50
@manucorporat manucorporat
v4.0.0-beta.6
7b82877
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.6

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/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/flex-utils.css";

Bug Fixes

Loading

4.0.0-beta.5

27 Aug 19:17
@manucorporat manucorporat
v4.0.0-beta.5
d5b7a01
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.5

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