The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

We're excited!

We’re so excited for the beta 10 release of Ionic 2! The Ionic team has been focused on bug fixes, in preparation for our release candidate. In addition to bug fixes, we’ve improved the page structure and added a new feature!

Structural Improvements

Ionic 2 Page Structure Example

We’ve made some big changes to the page structure that we think you’ll love! The ion-content component will now take up the full height of your viewport. The content will automagically account for headers, footers, and tabs. By default, the content won’t scroll behind headers and footers, but by adding the fullscreen attribute to the ion-content, it will. At first glance, the fullscreen option may not look any different than the default, but by adding transparency to the header, the content can be seen under the header as the user scrolls.

This means it’s now possible to hide the navigation bar in a tab! Your application can take advantage of translucent and shrinking navigation bars or transparent navigation bars that expose the content background—the possibilities are endless!

We will be adding this translucent effect as a default in an upcoming release. In the meantime, the following markup can be used to create the page above:

<ion-header class="opaque">
  <ion-navbar no-border-bottom>
    <ion-title>Toy Story</ion-title>
    <ion-buttons right>
      <button>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="apps" primary>
      <ion-segment-button value="all">All</ion-segment-button>
      <ion-segment-button value="favs">Recent</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  ...
</ion-content>

with some added styling:

.opaque {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.opaque .toolbar-background {
  background-color: rgba(#f8f8f8, 0.55);
}

Note: backdrop-filter is only supported in Safari at this time.

Please see the changelog for a full list of changes that affect the structure, as well as the Steps to Upgrade to Beta 10.

Item Enhancements

reordering

Reordering

The ability to reorder items in a list has arrived! Click on and drag items to a new spot within the list, and the item just fits. Items must be grouped in a ion-list or ion-item-group with the reorder attribute in order to use this feature. Check out the Item Reorder API Documentation for more information.

Complex Headers and Dividers

List headers and item dividers now support the addition of buttons, links, and more! Both elements are now items, but they still take on their own unique styling. This means that they now use item placement to position elements. There is nothing special you have to do to take advantage of this new feature. Head over to the Item API Documentation for usage examples!

Ionic 2 List Dividers Example

What’s Next?

We’re working hard to get to the release candidate stage. This means we will be focused on improving the framework, which includes finalizing the API, decreasing startup times, and reducing file sizes. Make sure to glance at our Ionic 2 Roadmap and GitHub milestones for the latest on what we’re working on!

Thanks!

As always, we want to say thank you to everyone for all of your contributions to the framework. We hope you’re as excited about this release as we are!

  • imakkie

    Is that translucent effect in the navbar made in css or its a native behaviour?

    Great work guys, cant wait for beta11 with WKWebView 😀

    • Kirill Groshkov

      css

      • imakkie

        ok, uhm, well, how? 😀

        looks gorgeous!

        • Manu Martinez-Almeida

          yeah! it is. We use “backdrop-filter” only supported in Safari currently, and in WKWebview. Very good performance, 60FPS in a iPhone 6 according to our tests!!

          Check out this WIP: https://github.com/driftyco/ionic/pull/7085

          • imakkie

            wonderful! ill keep an eye on that 😉

        • Brandy Carney

          I added the markup and css for the translucent header to the post! 🙂

  • Zainan Victor Zhou

    Hi, According to
    “Ionic Framework Meeting Notes: 2016-06-22” https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit

    The Angular2 RC3 will include new router
    http://angularjs.blogspot.com/2016/06/rc3-now-available.html

    I just wanna confirm does beta-10 includes Router 3?

    Thank you!

    • yesimahuman

      We’re tracking the status of the new router but it’s not quite production ready yet. We’re working with the Angular team and will get it in once it’s ready.

      • Zainan Victor Zhou

        Thank you @yesimahuman:disqus. So that means the beta-10 did not include Angular2 RC3? What angular2 RC version is it currently on?

        • http://ionicframework.com/ Adam Bradley

          Beta10 does include Angular2 RC3, however, the router is not in a stable position yet.

        • yesimahuman

          I misunderstood. Yea the router is in there so you *could* use it, but it’s not integrated into Ionic’s lower-level navigation stuff yet. We’re waiting for it to stabilize first.

          • Zainan Victor Zhou

            Thank you!

  • JJohn

    That’s great! Can’t wait for the RC to come. We’re about to release an app.
    Please add in https://github.com/driftyco/ionic/releases/tag/v2.0.0-beta.10 the fact that you moved to Angular RC3. It’s just by reading some comments here that I realized you updated Angular.
    Also https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md is not updated yet, which is why I only found out about it today.

  • http://www.reactapps.com React Apps

    Awesome, great work guys! I Just noticed one thing when I create a new app it’s being created in typescript, Is this change intentional if yes can you please help me how do I create a new app in ES6

    • Cesco Ferraro

      try adding a –js flag to your crete command

      • http://www.reactapps.com React Apps

        thanks Cesco, I tried it already it didn’t work, still creates ts app

        • danbucholtz

          The team has decided that we are going all in on Typescript. We have seen tremendous productivity improvements from it. Javascript projects will still work – but we won’t formally support them at this time.

          Thanks,
          Dan

          • MichaelR

            I went with TS long ago just to force myself to get used to it.. to be honest, I don’t think I could quantify how many hours… no, DAYS… of bug hunting I’ve saved due to Intellisense alone. I would never go back.

          • http://www.reactapps.com React Apps

            thanks Michael, I think I have to give it a go

          • http://www.reactapps.com React Apps

            thanks for the clarification Dan!

  • Cesco Ferraro

    this is great for testing the new angular2 forms module! thanks guys

  • Matan Yedayev

    Awesome great job!
    I want to ask, Android will ever have plugin for translucent status bar?…

    • Manu Martinez-Almeida

      It is a CSS rule (backdrop-filter) but it is not supported by Chrome, so we can’t do anything about it 🙁

    • Deepdark

      material design with translucent components wouldn’t be that good

      • Matan Yedayev

        I didnt mean translucent components, only status bar. Its should be native plugin

  • jerome

    A.W.E.S.O.M.E

  • Slash

    Wenn will you re enable the new angular router?

  • 심찬보

    my ion-navbar is always no-border-bottom

  • http://www.buerguo.com eefeng

    太酷了~ 真心很强大~加油~

  • Oliver Grack

    Awesome work!

    Will angular2-template-compiler be included in Ionic 2 by default?
    It sounds like this compiler could have large performace increasments.

    • Manu Martinez-Almeida

      yes! but we are still working on it 🙂

      • Oliver Grack

        Nice to hear 😀

  • Pie Cy

    for the reorder list..no push down animation for the first item when you drag another item above it.like you want to move the 2nd item to 1st index

  • eric

    do you support scroll down hide header? similar to scroll sista (which is broken for ionic 1)?

  • John McCann

    Really an awesome news that Ionic 2 Beta 10 got released. The translucent effect will surely make it. The design for different platform which are showed above are really magnificent. At Mobiloitte we are trying to improvise the state of work to make it more accurate and qualitative.The world of technology is changing with it a lot of changes in platforms too. Keep up the Good Work.
    John McCann
    Senior Android Developer | Mobiloitte

  • Tweets Nearby

    When will you make documentation for Ionic 2 push notifications?

  • ghenry22

    regarding the transparent header, with the latest webview updates on a Samsung s7 transparency works on the header. Although it seems to be straight transparency without the blur effect.

    Definitely a need to be able to have iOS with the semi-transparent look and android with a solid color to keep each platform consistent with their native styling.

  • Krishna Karki

    When do you think it will be stable? Is it right time switch version 2?

  • Muhammad Kamran Qadri

    Any expected date for next beta, as want to start new project and need the new forms and router.

  • fkn1088

    Could anyone share the code for the last example with segments and search bar http://blog.ionic.io/wp-content/uploads/2016/06/list-dividers-white.png? Thanks!

  • Philip Chen

    Just a question. When I use the npm to install the [email protected], it goes to version 37(2.0.0-beta.37). But the version 11 just release few days ago. Do I lost anything? And where can I check the version for ionic2?

    • louis lavin

      Thats the Ionic CLI Version: 2.0.0-beta.37. Its installed. If you want to see the current beta for the framework make sure you are in your project folder and then you can run ionic info from the command line to see what version of Ionic Framework Version you have installed.

      • Philip Chen

        thank you

  • piyush

    hello i am new in ionic2 so can u help for this

    {{item.topic_id}}

    it’s not work for me

  • Rammani Yadav

    Cool bunch of built-in features of Ionic 2 Beta will surely take the hassles out of cross platform app development, provide more flexibility and choices thereby adding quality to deliverables. Though this is my personal opinion being a mobile app developer at Root Info Solutions, I’m confident that this will take the app development community by storm.

    Ram | Mobile App Developer at Root Info Solutions