Ion-tabs personalizado - Ionic 6

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.

Crear las tabs iniciales

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.

Resultado

Tab seleccionada

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().

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.

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.

Resultado

Implementar estilos

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.

Resultado

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

Resultado

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

Resultado

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

Resultado

• Tu archivo de estilos debería de verse algo así:

Resultado final

Si todo salió bien, las tabs se deberían de ver así:

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