Ionic 2 Beta 10 is Live!

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

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

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!

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!