¿Cómo personalizar los estilos de los componentes en Ionic?
Hemos utilizado los capítulos anteriores para familiarizarnos con los componentes web de Ionic, los componentes de React de Ionic, como trabajar con ambos, como compilar una aplicación móvil Android con Ionic, ahora vamos a aprender como personalizar los estilos de los componentes para crear nuestros propios diseños.
Para ello vamos a aprender a:
- Utilizar variables css.
- Configurar temas con nuestras para nuestras aplicaciones.
- Configurar estilos tanto de aplicaciones web como aplicaciones react.
¿Cómo funcionan los estilos en Ionic?
Cuando se desea configurar estilos en Ionic tenemos diferentes niveles.
- Los Temas (App Themes)
- Estos aplican los colores y estilos base a través de toda la aplicación.
- A través de todos los componentes
- Se aplica a todos los componentes de la aplicación.
- Componentes
- Podemos aplicar estilos directamente a los componentes y solo estos se reflejarán dichos estilos.
Para poder aplicar estilos a través de toda la aplicación Ionic utiliza variables CSS.
.boton {
color: var(--color);
}
Al utilizar variables css, podemos utilizar estos valores a través de toda la aplicación e incluso definir valores dinámicos (que cambian) en base a selectores css o media queries, lo que nos permite dar valores específicos dependiendo de la resolución y/o orientación del dispositivo.
¿Qué es el Responsive Grid de Ionic?
Ionic utiliza una serie de clases para crear diseños responsivos, este tipo de clases funcionan como una tela o malla (grid).
A través de las variables css es posible definir las dimensiones y espaciamientos que existen en las clases del grid de Ionic.
¿Cómo utilizar estilos inline o inline-styles en Ionic?
También es posible utilizar inline-css, es decir escribir directamente los estilos dentro de las etiquetas de nuestros componentes. Esto permite afectar de manera única a una instancia de un componente sin que el resto de las instancias de este se vean afectados.
Introducción a la personalización de estilos
Si regresamos a nuestro proyecto y abrimos el archivo App.tsx podremos ubicar una línea en la cual nuestra aplicación manda llamar todas las variables de css con las cuales configura nuestra aplicación.
import "./theme/variables.css";
Si abrimos el archivo theme/variables.css podemos ver la estructura de la sintaxis de las variables css.
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
}
Las variables css no son una característica añadida de Ionic sino del propio css. Pueden ser utilizadas en cualquier proyecto en el que se utilicen las CSS (Cascade Style Sheet “Hojas de Estilo en Cascada”).
Para que las variables se encuentren disponibles en cualquier punto del DOM (Document Object Model) de nuestros documentos HTML, utilizamos el selector :root que hace referencia a la parte superior del DOM.
:root {
/* aquí nuestras variables */
}
¿Cómo utilizar variables css dentro de media queries?
Si navegamos dentro del archivo variables.css encontraremos una sección en la cual las variables css son aplicadas dentro de bloques media queries. Esto permite a nuestra hoja de estilo indicar que el valor las variables puede ser diferente bajo la condición que indique cada media query.
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
}
}
En este ejemplo anterior podemos ver algunos de los estilos del tema oscuro (Dar Mode). Que podríamos configurar a nuestro antojo y serían aplicados a través de todo el proyecto, cuando los componentes utilicen el tema Dark Mode.
¿Cómo ver las variables y sus valores dentro de Google Chrome?
Abre el proyecto que hemos estado trabajando y luego el Google Developer Toolbar.
Ve a la sección elements y elige alguno de los elementos que forman parte de alguno de los componentes de la aplicación.
En la parte final de la sección Styles aparecen listadas todas las variables que están teniendo efecto sobre el componente.
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
}
Dentro de variables.css cambia el color de –ion-color-primary a otro color, por ejemplo orange y podrás ver como el resto de los componentes cambian también de color.
¿Cómo asignar colores a los componentes mediante sus props?
Los colores en Ionic están asignados a un nombre dentro del tema, entre estos tenemos.
- primary (primario)
- secondary (secundario)
- tertiary (terciario)
- success (algo así como satisfactoriamente)
- dark (oscuro)
- light (brillante)
Para cambiar el color a nuestro botón abrimos nuestro proyecto y vamos a ControlesIMC.tsx, dentro de la etiqueta del botón agregamos el prop color con el nombre de alguno de los anteriores colores.
<IonButton color="secondary" onClick={props.onProcess}>
Calcular
</IonButton>
Un grupo de color se llama esquema o paleta de color o “Color Schema”. Es mas sencillo maneja esta paleta si a cada color le damos un nombre en base a su uso y evitamos utilizar nombres de colores como “verde, amarillo, rojo” que no describen la función de donde sera utilizado.
¿Cómo generar una paleta de colores de forma sencilla?
En Ionic existe un Generador de Colores, que es una herramienta para generar nuestra paleta de colores de forma sencilla y que nos evita tener que editar todo nuestro archivo variables.css ya que genera todo el código necesario para crear nuestros propios temas.
¿Cómo configurar estilos individuales en Ionic para Web, Android, iOS, etc.?
Cuando abrimos nuestra aplicación en Google Chrome, por default vemos la apariencia que tiene en el modo web. Si habilitamos el Developer Tools y el modo vista móvil (Ctrl+Shift+M) podremos ver la vista previa en diferentes dispositivos.
Elegimos una versión de Android como Pixel 2 y la apariencia cambiará su look a la manera en la que los componentes son desplegados en Android.
Expandimos la pestaña Elements del Developer Tools, y dentro del inspector vamos hasta la etiqueta superior . Dentro de la propiedad class veremos que esta listada la clase plt-android que es asignada cuando estamos visualizando un dispositivo Android. Simultáneamente la propiedad mode tiene el valor md (md significa Material Design, que es el framework de diseño de los dispositivos Android).
Si cambiamos el dispositivo de Pixel 2 a iPhone6, tendremos ahora para la etiqueta html la clase plt-iphone y la propiedad mode el valor ios.
Teniendo lo anterior en cuenta, podemos definir valores específicos para los dispositivos.
Vamos al archivo variables.css y justo después del selector :root agregamos un selector exclusivo para ios.
.ios {
--ion-color-primary: indigo;
}
.md {
--ion-color-primary: purple;
}
Ahora podremos ver que cuando cambiamos entre un dispositivo Android y uno iOS, ambos mostrarán colores (estilos) diferentes para cada plataforma.
Por default la vista web utiliza la clase md (Material Design), por lo que los estilos que agreguemos sobre esta clase también serán aplicados sobre la vista web.
Propiedades css de los componentes
Cada componente tiene asociadas distintas variables css que actúan sobre este. Por ejemplo para nuestro ejemplo utilizamos el IonCard, podemos darle un id único.
<IonCard id="mi-card">
<IonCardContent>
<h2>{calculoDeIMC}</h2>
</IonCardContent>
</IonCard>
Ahora creamos un App.css e incluimos esta hoja de estilo dentro de App.tsx.
import "./App.css";
Dentro de App.css vamos a reescribir las variables css asociadas a este componente. Estas variables aparecen en la sección CSS Custom Properties.
#mi-card {
--background: red;
--color: white;
}
Ahora cuando ingresemos valores y presionemos el botón Calcular, este nos mostrará un componente IonCard con fondo rojo y texto blanco.
