Menu

Ionic 2 Beta 10

releaseionic2 - July 01, 2016 por Nicolas Molina

En este nuevo release de Ionic 2 Beta 10 el equipo de ionic se ha enfocado en la solución de bugs, en agregar nuevas características, pero sobre en estar preparado para un release candidate que estará cerca, en este release si hay BREAKING CHANGES ya que hay nuevas características que cambian un poco la estructura de nuestras páginas.

Los principales cambios son:

  1. Full-screen en ion-contend: ion-contend tomara el 100% del viewport por posibilidad de agregar un efecto glace.
  2. Reordering: ahora podremos reordenar elementos de una lista solo haciendo drag sobre el ítem y moviéndolo sobre la posición que queremos que quede en la pantalla. Ver doc
  3. Complex Headers and Dividers: podremos poner en cada divider de las listas complejas opciones como botones, links o más. Ver doc

Full-screen en ion-contend.

Se basa en un cambio en la estructura, sobre el componente ion-content que ahora tendrá el 100% del viewport y automáticamente tendrá el alto y scrolling si la página posee tabs, footer o header, pero si le agregamos a ion-content el atributo fullscreen, se agregara un bonita característica, cuando se haga scroll se mostrar un efecto de glace en el header, mejor veamos:

El código sería así:

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

El código css así:

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

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

¿Cómo actualizar?

npm install --save ionic-angular@2.0.0-beta.10 @angular/common@2.0.0-rc.3 @angular/compiler@2.0.0-rc.3 @angular/platform-browser@2.0.0-rc.3 @angular/platform-browser-dynamic@2.0.0-rc.3 @angular/http@2.0.0-rc.3 @angular/core@2.0.0-rc.3  @angular/router@2.0.0-rc.2

Todos los detalles:

2.0.0-beta.10 (2016-06-27)

BREAKING CHANGES

  • ion-content now takes up 100% of the viewport height, but it has margin added to the top and bottom to adjust for headers, footers, and tabs.
  • ion-content now accepts fullscreen as an attribute to to tell the content to scroll behind the header. This allows for transparent toolbars and tab pages without navbars!
  • ion-navbar no longer has the *navbar attribute.
  • ion-navbar should now be wrapped in an ion-header
  <ion-header>
    <ion-navbar></ion-navbar>
  </ion-header>
  • ios only: ion-toolbar/ion-navbar will always have borders to both the top and bottom of the element. Use the attributes no-border-top and no-border-bottom to remove the respective borders.
  • An ion-nav or ion-tabs is required in the root component. If one of these does not exist your content may be pushed up behind your header.
  • The position attribute has been removed from the ion-toolbar, it should now be placed in an ion-header or an ion-footer. It can also be placed inside of an ion-content.
  • The only elements that should be children of a page are ion-header, ion-content, and ion-footer.

Steps to Upgrade to Beta 10

  1. Run the following command from your command prompt/terminal to update to the latest version of the Ionic framework 2:
npm install --save ionic-angular@2.0.0-beta.10 @angular/common@2.0.0-rc.3 @angular/compiler@2.0.0-rc.3 @angular/platform-browser@2.0.0-rc.3 @angular/platform-browser-dynamic@2.0.0-rc.3 @angular/http@2.0.0-rc.3 @angular/core@2.0.0-rc.3  @angular/router@2.0.0-rc.2
  1. Remove the *navbar attribute so this:

<ion-navbar *navbar>

becomes this:


<ion-navbar>

  1. Wrap any toolbars/navbars above the ion-content in an ion-header. The following:

  <ion-navbar>
    <ion-title>
      Navbar Title
    </ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-title>
      Toolbar Title
    </ion-title>
  </ion-toolbar>

  <ion-content>

  </ion-content>

becomes:


  <ion-header>
    <ion-navbar>
      <ion-title>
        Navbar Title
      </ion-title>
    </ion-navbar>

    <ion-toolbar>
      <ion-title>
        Toolbar Title
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

  </ion-content>

  1. Wrap any toolbars/navbars after the ion-content in an ion-footer. The following:

  <ion-content>

  </ion-content>

  <ion-toolbar position="bottom">
    <ion-title>Footer Toolbar</ion-title>
  </ion-toolbar>

becomes:


  <ion-content>

  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer Toolbar</ion-title>
    </ion-toolbar>
  </ion-footer>
  

Bug Fixes

  • animation: correctly apply will-change: transform (a1223da)
  • bootstrap: only add customProviders when present (0e9e85c)
  • content: adjust footer bottom based on the tabbar without padding (4567de2)
  • content: set footer height to 0 so it won’t be undefined (3db67f9)
  • cordova: fix the status bar padding with the new structure (15642e4)
  • demos: updates @angular paths (b7826ba)
  • footer: show footer toolbar w/ tabbar bottom (99c50a1)
  • generator: fix closing tag for header (47e09a1)
  • header: optional ViewController injection (5a85d82)
  • input: allow button click when input has focus (ae86ab8), closes #6514 #6944
  • input: check if there is a value when setting value (d0b1930)
  • input: fix the clear input button to always be vertically aligned (e4cc672)
  • item: inherit overflow and text-overflow from the parent item in a paragraph (4009575)
  • item: listEle does not longer exist (22fad4c)
  • item: sliding item works with and without borders (2303c16), closes #7081
  • item: sliding items don’t fire (click) when swiped (38ab17b)
  • modal: add class name to modal (6e34739), closes #7000
  • nav: auto set iOS black transition bg via css (7842991)
  • picker: adds align to the PickerColumn interface (b8551de)
  • refresher: adjust location after layout updates (603000f)
  • refresher: only listen for mousemove/touchmove when needed (1a58a41)
  • tabs: don’t add outline to the class name if it is a logo icon (af22287), closes #6899
  • tabs: fix tabs rootNav (ae40edf)
  • tabs: hide tab’s navbar when a page comes without a navbar (2d68089), closes #5556
  • tabs: reference parent instead of parentTabs (ed6d0fa)
  • tabs: swipeBackEnabled works with tabs as expected (2bff535)
  • toggle: host listeners are not longer needed (4aa322d)
  • toolbar: place iOS border on ion-header/footer (48c1ffd)
  • toolbar: position toolbar relative and add z-index (1d8ba4a)
  • virtualScroll: first node should use clientTop/clientLeft (2197d49)

Features

  • feature-detect: detect if backdrop-filter is supported (89564f1)
  • fullscreen: add fullscreen property to ion-content (f20c7e4)
  • item: sliding items work with list reorder (bfdc898)
  • list: add list headers and item dividers as items (712ff81), closes #5561
  • list: reorder list items (5c38921)
  • range: add debounce input for ionChange event (55eccb3), closes #6894
  • toolbar: control toolbar borders on top/bottom (3a7addf)

Performance Improvements

  • reorder: hit test refactored (6a52a4a)

¡Compártelo!