{"id":1158,"date":"2016-06-30T15:51:44","date_gmt":"2016-06-30T15:51:44","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1158"},"modified":"2016-06-30T18:21:53","modified_gmt":"2016-06-30T18:21:53","slug":"ionic-2-beta-10-is-live","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-2-beta-10-is-live","title":{"rendered":"Ionic 2 Beta 10 is Live!"},"content":{"rendered":"

\"We're

We\u2019re so excited for the beta 10 release of Ionic 2<\/a>! The Ionic team has been focused on bug fixes<\/a>, in preparation for our release candidate. In addition to bug fixes, we\u2019ve improved the page structure and added a new feature!
\n<\/p>\n

Structural Improvements<\/h3>\n

\"Ionic

We\u2019ve made some big changes to the page structure that we think you\u2019ll love! The ion-content<\/code> 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\u2019t scroll behind headers and footers, but by adding the fullscreen<\/code> attribute to the ion-content<\/code>, it will. At first glance, the fullscreen<\/code> 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.<\/p>\n

This means it\u2019s 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\u2014the possibilities are endless!<\/p>\n

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:<\/p>\n

<ion-header class="opaque">\n  <ion-navbar no-border-bottom>\n    <ion-title>Toy Story<\/ion-title>\n    <ion-buttons right>\n      <button>\n        <ion-icon name="more"><\/ion-icon>\n      <\/button>\n    <\/ion-buttons>\n  <\/ion-navbar>\n  <ion-toolbar no-border-top>\n    <ion-segment [(ngModel)]="apps" primary>\n      <ion-segment-button value="all">All<\/ion-segment-button>\n      <ion-segment-button value="favs">Recent<\/ion-segment-button>\n    <\/ion-segment>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content fullscreen>\n  ...\n<\/ion-content>\n<\/code><\/pre>\n
with some added styling:<\/p>\n
.opaque {\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n}\n\n.opaque .toolbar-background {\n  background-color: rgba(#f8f8f8, 0.55);\n}\n<\/code><\/pre>\n
Note: backdrop-filter<\/a> is only supported in Safari at this time.<\/p>\n
Please see the changelog<\/a> for a full list of changes that affect the structure, as well as the Steps to Upgrade to Beta 10<\/a>.<\/p>\n
Item Enhancements<\/h3>\n
\"reordering\"
Reordering<\/strong><\/p>\n
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<\/code> or ion-item-group<\/code> with the reorder<\/code> attribute in order to use this feature. Check out the Item Reorder API Documentation<\/a> for more information.<\/p>\n
Complex Headers and Dividers<\/strong><\/p>\n
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<\/a> 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<\/a> for usage examples!<\/p>\n
\n\"Ionic