Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Personalizar Ionic 2

Una de las cosas que más me gustan de Ionic 2 es su adaptabilidad en diseño. Por un lado, sus componentes están prediseñados por defecto según los standards de cada plataforma. Por el otro, el equipo de Ionic ha hecho un gran trabajo con SaSS para que puedas personalizar el diseño de tu app al 100%.

Deja que te cuente los principales mecanismos de personalización de Ionic 2.

Colores

Uno de los principales mecanismos de personalización de cualquier app son los colores. Diseñar una app exige un esfuerzo considerable eligiendo la paleta de colores adecuada y decidiendo posteriormente como usarla.

Ionic 2 proporciona unas variables de SaSS predefinidas con algunos colores, que modifican automáticamente el comportamiento de sus propios componentes.

Estas variables se encuentran en un archivo destinado justamente a la personalización de la app, en src/theme/variables.scss:

// src/theme/variables.scss

// ...
$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
//...

Puedes usar estos colores directamente como propiedad en cualquier componente del framework y lograrás modificar su comportamiento.

Por ejemplo, asignando estos colores sobre los botones…

  <button ion-button color="primary">Primary color btn</button>
  <button ion-button color="secondary">Secondary color btn</button>  
  <button ion-button color="danger">Danger color btn</button>    

Conseguirás este resultado…
ionic button colors

Actualizando variables de color

El mecanismo obvio para cambiar estos colores es sobreescribir las variables en el archivo anterior. De este modo, podría darle un valor #E28413 al color primary

// src/theme/variables.scss

// ...
$colors: (
  primary:    #E28413,
  //...
);
//...

…y se actualizarán todos los componentes que lo usen.

Los botones del caso anterior quedarían así:
ionic updating colors

Creando nuevos colores

La variable $colors de SaSS que define Ionic, es un map al que le puedes añadir otros elementos.

Podría crear, por ejemplo, un color corporate

// src/theme/variables.scss

// ...
$colors: (
  corporate: #2eb398,
  //...
);
//...

…y utilizarlo tranquilamente como cualquier otro color de Ionic:

<button ion-button color="corporate">CORPORATE color btn</button>

El resultado sería este:
custom color ionic

Color de contraste

El mapa de colores de Ionic permite detallar más los colores, incluyendo uno de base y otro de contraste (que en un botón, corresponderían al color de fondo y al del texto, respectivamente). Lo harías así:

// src/theme/variables.scss

// ...
$colors: (
  corporate:  (
    base:#2eb398,
    contrast:#27292B
  ),
  //...
);
//...

El botón anterior se actualizaría así:
ionic contrast color

Colores en componentes custom

Ya has visto como usar el mapa de colores de Ionic en sus propios componentes, pero… ¿y si quieres utilizar esos mismos colores en tus propios componentes?

Fácil: solo tienes que usar la función de SaSS color que proporciona Ionic.

Detalle: A priori podrías utilizar el método map-get de SaSS, pero eso no te serviría para colores que incluyen base y contraste. Por eso Ionic te proporciona el método color.

Aquí tienes un ejemplo de como usarlo tanto para colores básicos como para colores con contraste.

    my-custom-comp{
        background-color: color($colors, primary);
        color: color($colors, corporate, base);
    }

Variables y métodos SaSS

Justamente como Ionic utiliza SaSS, puedes sacar partido de su potencial para facilitarte las cosas.

Variables SaSS

Imagina que quieres reaprovechar un mismo valor en varios lugares de tu hoja de estilos. Para eso tienes las variables de SaSS. Ahí va un ejemplo muy simple:

$box-size: 40px;

box-component{
    height: $box-size;
    width: $box-size;
}

Métodos SaSS

Ya has visto el método color de SaSS que te proporciona Ionic. En la propia documentación de SaSS puedes encontrar muchas otras funciones interesantes.

Me parecen especialmente útiles las de manipulación de color, como lighten($color, $amount) o darken($color, $amount), para obtener una versión más clara/oscura de otro color.

Por ejemplo, podría crear un color compuesto (base y contraste), del siguiente modo:

// src/theme/variables.scss

// ...
$colors: (
  primary:  (
    base:#E28413,
    contrast:darken(#E28413, 15%)
  )
  //...
);
//...

El resultado sería este botón:
ionic darken contrast button

Atributos útiles prediseñados

Ionic ha prediseñado un conjunto de atributos que, al aplicarlos sobre sus componentes, realizan una serie de transformaciones de CSS muy útiles.

Los atributos prediseñados de Ionic se utilizan así:

<ion-content padding></ion-content>

Donde padding es uno de estos atributos.

Transformaciones de texto

Los nombres son autoexplicativos. Los hay para alinear el texto, ajustarlo o manipularlo. Aquí los tienes:
text-left, text-center, text-right, text-justify, text-wrap, text-nowrap, text-uppercase, text-lowercase, text-capitalize.

Paddings del elemento

Nombres también muy obvios:
padding, padding-top, padding-left, padding-right, padding-bottom, padding-vertical, padding-horizontal, no-padding .

Margins del elemento

Igual que con los paddings:
margin, margin-top, margin-left, margin-right, margin-bottom, margin-vertical, margin-horizontal, no-margin.

Alineación de los ion-button

  • start: Alinea el elemento al inicio, en función del SO. En iOS, esto significa a la izquierda mientras que en Android lo ubica el primero a la derecha.
  • end: Alinea el elemento al final, en función del SO. En iOS es a la derecha mientras que en Android lo ubica el último la derecha.
  • left: Lo alinea a la izquierda.
  • right: Lo alinea a la derecha.

Estilos específicos por plataforma

Ionic añade una clase concreta al componente raíz de la app en función del SO sobre el que se está ejecutando. Por ejemplo:

<ion-app class="md">

Las opciones son:

  • ios: Para iOS
  • wp: Para Windows
  • md: Para Android y también cuando no son los anteriores.

Así, todo el contenido de la app hereda esa clase y los estilos de los componentes se ven afectados de forma acorde. No solo eso, si no que tú también puedes aprovecharlo en tu favor.

Cambiando estilos por plataforma

Por ejemplo, si quieres añadir un margen inferior de 10px a todos los botones cuando estás en Android, puedes actualizar la hoja global de estilos así:

.md button {
  margin-bottom: 10px;
}

Variables SaSS por plataforma

Ionic dispone también de multitud de variables SaSS con valores por defecto que asigna a sus componentes. El ejemplo anterior también lo podrías resolver actualizando la variable adecuada en el archivo SaSS principal, antes de cargar Ionic:

 $button-md-margin: 0px 0px 10px 0px;
 //. . .

 @import "ionic";

Puedes consultar todas las variables por defecto de Ionic aquí.

Configuración inicial

El estilo que se aplica en función de la plataforma no solo afecta al CSS, sino que también modifica la configuración de inicio con la que se carga la app.

Esta configuración inicial -que puedes modificar en el @NgModule-, define cosas como la ubicación de los tabs (tabsPlacement), las animaciones entre páginas (pageTransition) o el contenido del botón atrás (backButtonText).

Puedes consultar más detalles de la configuración por defecto aquí.

Conclusiones

Como ves, Ionic 2 se adapta por defecto al entorno en que se ejecuta la aplicación (Android, iOS, Windows), pero está diseñado para que puedas tunearlo a tu antojo, tanto a escala individual, como a la hora de modificar los estilos de toda la plataforma.

Y esta reflexión me lleva a la pregunta de la semana:

¿Eres de los que utilizan los estilos por defecto de Ionic, o tuneas fuertemente tus apps?

Puedes contestar en los comentarios.

¡Un abrazo!

Published inIonic 2

8 Comments

  1. Fran Fran

    Hola Enrique en primer lugar enhorabuena por el blog que sigo desde mis feed.
    Con respecto a personalizar la app es posible ir un paso más allá y cambiar simplemente los colores en tiempo de ejecución? Es decir me conecto a un endpoint que me devuelve un json donde se indica los colores que usara la app para un determinado usuario al hacer login.
    Entiendo que al compilar scss a css. En tiempo de ejecución tendría que sobrescribir las propiedades css. Sabes si es posible hacer lo que quiero? Gracias

    • Enrique Oriol Enrique Oriol

      Lo más sencillo, si no son muchos colores y los conoces de antemano, es añadirlos al mapa $colors de SaSS y aplicar un data binding para modificar la propiedad color de forma dinámica (

      ).

      Si no… bueno, puedes incorporar nuevas hojas de estilo, pero no es trivial.

      Saludos

  2. ¿Eres de los que utilizan los estilos por defecto de Ionic, o tuneas fuertemente tus apps? Depende del app que tenga que hacer y el cliente peor por lo general uso los por defecto máximo cambio de colores. Saludos

  3. Enrique Enrique

    Muy interesante el artículo, la verdad es que estoy empezando en Ionic y voy un poco perdido.

    Mis dos preguntas son:

    1.- Quiero poner mi propio icono del botón atras para la navegación en Ionic. ¿Donde se realizaria esta configuración para que independientemente de la plataforma siempre sea mi imagen concreta?

    2.- Estoy haciendo una app que tiene imagenes en HTML y otras en CSS y cuando la ejecuto en el servidor (ionic serve) veo todas las imágenes sin ningun problema pero cuando compilo y lo lanzo a mi dispositivo Android, no veo las imagenes. ¿Que estoy haciendo mal?

    Muchas gracias

  4. Hola Enrique!
    Me parece excelente el artículo, está muy bien interesante. Yo también estoy empezando a utilizar ionic, mi pregunta es la siguiente:
    Cómo puedo modificar los estilos predefinidos de ionic? no estoy del todo de acuerdo con ellos ya que no se me muestran de forma correcta algunos elementos. Me he dado a la tarea de investigar y se que al crear un proyecto en ionic se crea un directorio donde se maneja un archivo sass (main.scss), me imagino que es la hoja global que mencionas arriba. Si modifico dicho archivo para corregir lo que no se me muestra bien se aplican bien los cambios, pero una vez que vuelvo al correr el servidor (ionic serve) el archivo vuelve a su estado original cómo si no se guardaran los cambios que hice.
    Sabes si existe alguna manera de modificar ese archivo y que si se apliquen los cambios correspondientes para lograr los estilos que necesito?

    Saludos y gracias por la información!

    • Enrique Oriol Enrique Oriol

      Hola Rubén,

      Seguramente estás intentando editar el archivo de estilos ya compilados.

      El archivo que quieres tocar tu, con los estilos globales (y donde los cambios no desaparecen tras hacer build), está en src/app/app.scss.

  5. Hola buenos días.
    Siempre he tenido la dura, sobre cual es la forma correcta de usar los componentes de Ionic, se debería personalizar el css o utilizar el standar

    • Enrique Oriol Enrique Oriol

      Ionic te proporciona un framework de diseño muy potente, igual que podrías usar bootstrap o material design. A partir de aquí, no creo que haya una «forma correcta». Es más bien una cuestión de hasta que punto conoces el framework, lo que te permite tocar y lo que no, y con qué forma de desarrollo te sientes más cómodo.

Deja un comentario