Introducción
Los Floating Action Buttons (FAB) son una excelente forma de ofrecer acceso rápido a acciones clave dentro de una aplicación. En Ionic, podemos usar componentes como ion-fab, ion-fab-button, y ion-fab-list para crear FABs con estilos personalizados y listas de acciones. Además, podemos aprovechar las capacidades de Angular para integrar acciones interactivas con estos botones.
¿Qué aprenderás?
- Crear FABs básicos y avanzados usando ion-fab, ion-fab-button y ion-fab-list.
- Personalizar FABs con degradados, animaciones y posicionamiento avanzado.
- Crear listas de FABs con múltiples botones que realicen acciones específicas.
- Implementar FABs funcionales en diferentes plataformas y dispositivos.
Paso 1: Crear una Aplicación Ionic
Si no tienes Ionic instalado, puedes hacerlo ejecutando el siguiente comando:
npm install -g @ionic/cliDespués, crea una nueva aplicación:
ionic start fabApp blank --type=angularNavega al directorio del proyecto:
cd fabAppPaso 2: Añadir FAB Básico con ion-fab y ion-fab-button
Los FABs suelen colocarse dentro del componente ion-content. A continuación, vamos a implementar un FAB básico. Abre el archivo src/app/home/home.page.html y reemplaza el contenido con lo siguiente:
<ion-header>
<ion-toolbar>
<ion-title>
Demo de FAB
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- Contenido principal -->
<div class="main-content">
<h1>Floating Action Button (FAB) en Ionic</h1>
<p>Esta es una implementación básica de un FAB.</p>
</div>
<!-- FAB Principal -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
Explicación:
- ion-fab: Se utiliza para definir la posición del FAB en la pantalla. En este caso, lo hemos colocado en la esquina inferior derecha (horizontal=»end» y vertical=»bottom»).
- ion-fab-button: Define el botón principal del FAB. Dentro del botón hemos colocado un icono usando ion-icon, con el ícono add.
Este código nos da un FAB básico que aparece en la esquina inferior derecha de la pantalla.
Paso 3: Añadir una Lista de Acciones con ion-fab-list
El verdadero poder de los FABs en Ionic viene con la posibilidad de mostrar múltiples botones de acción al hacer clic en el FAB principal. Para ello, vamos a usar el componente ion-fab-list. Modifica el código en home.page.html para añadir una lista de FABs:
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<!-- Lista de acciones -->
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="share"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="heart"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>Explicación:
ion-fab-list: Contiene una lista de botones FAB adicionales que se expanden desde el botón principal. En este ejemplo, la lista se expande hacia arriba (side="top").- Cada
ion-fab-buttondentro de la lista tiene un icono diferente para realizar distintas acciones.
Cuando el usuario haga clic en el botón FAB principal (con el icono de «add»), aparecerán los botones adicionales con los iconos de camera, share y heart.
Paso 4: Personalización con CSS y Degradados de Color
Para personalizar los FABs y darle un estilo visual atractivo, como degradados de color, vamos a modificar el archivo src/app/home/home.page.scss. Añade el siguiente código:
/* Estilos personalizados para el FAB */
ion-fab-button {
--background: linear-gradient(45deg, #ff6f61, #de4343);
--color: white;
--border-radius: 50%;
--box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
width: 60px;
height: 60px;
}
ion-fab-button:hover {
--background: linear-gradient(45deg, #ff9478, #f76b6b);
}
ion-icon {
font-size: 1.5em;
}
.main-content {
text-align: center;
padding: 20px;
}
h1 {
color: #4a4a4a;
}
p {
color: #7d7d7d;
}
Explicación:
- Usamos
--backgroundpara aplicar un degradado lineal en los botones FAB. - La propiedad
--colorcambia el color del ícono dentro del FAB. - Hemos aplicado un box-shadow suave para darle un efecto de elevación.
- El tamaño de los botones FAB se define con las propiedades
widthyheight, lo que los hace más grandes y visibles.
Con este estilo, los FABs tienen un diseño más atractivo con colores degradados y un efecto de sombra.
Paso 5: Personalización Avanzada de la Posición del FAB
Los FABs pueden colocarse en cualquier parte de la pantalla utilizando las propiedades vertical y horizontal de ion-fab. A continuación, te mostramos un ejemplo de cómo colocar el FAB en diferentes lugares de la pantalla.
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="settings"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab vertical="center" horizontal="start" slot="fixed">
<ion-fab-button>
<ion-icon name="chatbubble"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="home"></ion-icon>
</ion-fab-button>
</ion-fab>Explicación:
- En este ejemplo, colocamos un FAB en la esquina superior derecha (
vertical="top",horizontal="end"), otro en el centro izquierdo (vertical="center",horizontal="start") y otro en el centro inferior (vertical="bottom",horizontal="center"). - Cada botón tiene un ícono distinto, lo que permite diferenciar las acciones.
Paso 6: Agregar Animaciones a los FABs
Las animaciones son una excelente forma de mejorar la experiencia del usuario. Podemos aplicar animaciones CSS para que los botones FAB se desplieguen con estilo cuando se haga clic en el botón principal.
Modifica el archivo home.page.scss para agregar animaciones a la lista de FABs:
/* Animación para los FABs en la lista */
@keyframes fab-list-show {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
ion-fab-list ion-fab-button {
animation: fab-list-show 0.4s ease-in-out;
}Explicación:
- Creamos una animación llamada
fab-list-showque hace que los botones aparezcan con un efecto de zoom y fade-in (escala y opacidad). - Aplicamos esta animación a los botones dentro de la lista de FABs, por lo que cada vez que la lista de FABs se despliega, los botones aparecerán con esta animación.
Paso 7: Interactividad con Ionic: Añadir Funcionalidad a los FABs
Ahora que tenemos FABs estilizados y animados, vamos a agregar funcionalidad. Podemos hacerlo con Angular para que cada botón realice una acción al ser presionado.
Primero, abre el archivo src/app/home/home.page.ts y añade la siguiente lógica para manejar los eventos de clic:
import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private alertCtrl: AlertController
) {}
async presentAlert(message: string) {
const alert = await this.alertCtrl.create({
header: 'Acción Seleccionada',
message,
buttons: ['OK'],
});
await alert.present();
}
}Luego, en el archivo home.page.html, añade los eventos de clic para los FABs:
<ion-fab-button (click)="presentAlert('Cámara seleccionada')">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
<ion-fab-button (click)="presentAlert('Compartir seleccionada')">
<ion-icon name="share"></ion-icon>
</ion-fab-button>
<ion-fab-button (click)="presentAlert('Favorito seleccionado')">
<ion-icon name="heart"></ion-icon>
</ion-fab-button>Explicación:
- Añadimos un evento
clicka cada botón FAB, que llama a la funciónpresentAlert()con un mensaje personalizado para cada botón. - Esta función muestra una alerta con el mensaje correspondiente, confirmando la acción del usuario.
Paso 8: Compatibilidad en Diferentes Plataformas
Uno de los mayores beneficios de Ionic es su compatibilidad con múltiples plataformas. Puedes probar tu aplicación en diferentes dispositivos y sistemas operativos:
Ejecutar la aplicación en el navegador:
ionic serveEjecutar en iOS o Android:
Si tienes configurado el entorno de desarrollo para iOS o Android, puedes usar Capacitor para ejecutar tu aplicación en dispositivos reales:
- Para Android:
ionic capacitor run android- Para iOS:
ionic capacitor run iosConclusión
¡Felicidades! Has creado una aplicación Ionic con Floating Action Buttons (FAB) completamente personalizados. Aprendiste a usar los componentes ion-fab, ion-fab-button y ion-fab-list, y los estilizaste con degradados de color, efectos de sombra, animaciones, y personalizaciones de posición.
Resumen de lo que cubrimos:
- Creación de FABs básicos y listas de FABs con múltiples acciones.
- Personalización avanzada de estilos con degradados y efectos.
- Agregar interactividad con Angular para que los botones realicen acciones al ser presionados.
- Asegurarse de la compatibilidad con múltiples plataformas usando Ionic y Capacitor.
Ahora puedes implementar FABs estilizados y funcionales en tus proyectos Ionic. ¡Sigue explorando y creando experiencias de usuario increíbles con FABs!
