Ion-tabs personalizado - Ionic 6
Tags: ionic, angular, css, typescript
Published: 2022-03-04 01:23:30

Ionic nos proporciona un componente (`ion-tabs`) sumamente útil para la creación de tus aplicaciones, pero algunas veces se requiere que el estilo sea diferente y acorde a tu aplicación.

Por esta razón les mostrare cómo realizar un estilo básico y sencillo pero bonito y funcional.


## <u>Crear las tabs iniciales</u>
Modificaremos el código generado inicialmente para poder agregar las tabs que se mostrarán, cambiamos el nombre de los iconos y eliminamos el `ion-label` para mostrar solo el icono.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3rne7t4eykbe4un83ni.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geytcow8r6bw6fe0i0ff.png)



## <u>Tab seleccionada</u>
Agregamos un hash al `ion-tabs` para tener una referencia del  elemento y saber qué tab esta seleccionada. De igual manera hacemos uso del evento `ionTabsDidChange` para que una vez la navegación ha terminado de hacer la transición a un nuevo componente, entre al método `setSelectedTab()`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od4yxfsdlijsshgiwscy.png)

Ahora nos iremos al archivo de TypeScript, agregaremos lo siguiente:

- `@ViewChild(IonTabs) tabs: IonTabs;` // Referencia al hash que implementamos en el HTML.

- `selected = '';` // Guardara el nombre de la tab que esta seleccionada.

- `setSelectedTab() {}` // Método al que ingresara después del evento ionTabsDidChange en el cual guardaremos el nombre de la tab seleccionada en la variable selected.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qofk883bzmbr4hlf2kuw.png)

Validamos en la propiedad `name` de los iconos, que la variable `selected` sea igual al nombre de la `tab` para cambiar a un icono con relleno cuando esta seleccionada.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldyn3hqggmddozl38zye.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngk2dii3nrdzadetiu95.png)



## <u>Implementar estilos</u>
Ya solo nos queda modificar los estilos para tener las tabs personalizadas, para eso nos iremos al archivo de estilos en donde agregaremos los siguiente:

- Modificaremos el `ion-tab-bar` en una posición relativa, cambiamos el alto y ancho, quitamos el borde que tiene por defecto y redondeamos las esquinas, los márgenes los dejamos en auto para centrarlo, damos unos 15px en el fondo, cambiamos el color del fondo a transparente y agregamos una sombra.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi6wli2qjd1ha671t2xe.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eukqiynm39mjvm7g7a.png)

- Crearemos las clases que se ocuparan cuando la tab este seleccionada o no seleccionada, estas se implementaran al icono de la tab. 
Cuando este seleccionada cambiaremos el fondo por un color mas oscuro, daremos 12px de espacio y redondeamos a 50% para que se vea como un circulo.
Cuando no este seleccionada solo cambiaremos el color del fondo a transparente.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oej99f7abci0z41p5i6e.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u50ilgzo4c1t98jol5iw.png)

- Ahora agregaremos los estilos para la tab central, el ancho, ancho máximo y alto tendrá el 100%, implementados el display en flex para centrar el icono, el fondo tendrá un color obscuro, redondeamos a 50%, el color los dejamos en blanco y al icono le cambiamos el tamaño de fuente para que se haga mas grande.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54xmuahoe51trjg7ltog.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od5632kzzr56dd3e3jz4.png)

- Por último a la tab que esta antes y la que esta después de la tab central le redondeamos los bordes, creamos las clases las cuales se implementaran en cada tab respectivamente.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtgfyddmc8imprlnwnxv.png)

**Resultado**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmyizkl0weg5o7y46anu.png)

- Tu archivo de estilos debería de verse algo así:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sondmrpnqoduxhewo6h.png)



## <u>Resultado final</u>

Si todo salió bien, las tabs se deberían de ver así:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ity02yhqbryhda3ukl6f.png)

> Si llegaste hasta aquí te agradezco que lo hayas visto, espero que este post sea de ayuda para ti 👋 👍