Aprender más de Ionic

En la documentación de Ionic podemos encontrar una extensa cantidad de recursos tales como videos, charlas, foros o tutotiales de formulas avanzadas. Es de visita obligada:

http://learn.ionicframework.com

Algunos ejemplos interesantes y útiles de estas formulas serían los siguientes:

Pull to refresh

Como se explica en este link, se basa simplemente en la inclusión de la directiva <ion-refresher> antes del <ion-list>. Añadiendo un par de parametros para el texto del refresco y la función que se llamará cuando se realize el pull lo deberíamos de tener funcionando:

<ion-content ng-controller="TodosCtrl">
    <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <ion-item ng-repeat="cosa in cosas">{{cosa.nombre}}</ion-item>
    </ion-list>
</ion-content>

Grid system

Si estamos familiarizados con Bootstrap, o cualquier otro framework CSS que use grid systems, nos será sencillo entender esta faceta de Ionic. Aquí encontramos la documentación oficial, y pero también se nos provee con un pequeño tutorial.

Resumiendo, como ya hemos visto, todo se basa en filas y columnas

    <!-- En este caso se espacian equitativamente -->

    <div class="row">
      <div class="col">33.3333%</div>
      <div class="col">33.3333%</div>
      <div class="col">33.3333%</div>
    </div>

    <!-- En este caso se espacian con restricciones -->
    <div class="row">
      <div class="col col-50">Yo ocupo el 50%</div>
      <div class="col">Nosotros nos repartimos lo que queda, yo un 25%</div>
      <div class="col">Y yo el otro 25%</div>
    </div>

    <div class="row">
      <div class="col col-75">Ocupo el 75%</div>
      <div class="col">Me quedo con el 25% restante</div>
    </div>

De la misma forma existe la posibilidad de dejar espacios en blanco con la clase col-offset-xx siendo xx el porcentaje que queremos dejar en blanco. También contamos con ciertas clases para determinar la alineación vertical del contenido de las columnas o las filas. Estas son las siguientes:

• Alineación vertical de la fila: Con row-top, row-center, o row bottom podemos alinear las celdas de una fila en su parte superior, media o inferior respectivamente. Esto suele se til cuando hay celdas más altas que otras y queremos conservar una harmonía visual.

• Alineación vertical de la columna: Para definir la alineación de una col, más concreta por tanto, tenemos las clases col-top, col-center, o col bottom.