Uso Avanzado y Personalización de ion-searchbar en Ionic

Introducción

En este tutorial aprenderás a usar el componente ion-searchbar de Ionic para crear una barra de búsqueda funcional y personalizada. Usaremos filtros avanzados con Angular Pipes para buscar elementos en una lista variada (incluyendo frutas, verduras y animales), aplicaremos estilos personalizados con degradados, y añadiremos animaciones suaves. Este proyecto está basado en Ionic con Angular y es ideal para aplicaciones móviles y web.

Este tutorial profundizará en la creación, personalización y optimización de ion-searchbar de Ionic. Implementaremos una interfaz de usuario completamente personalizada, aplicaremos filtros avanzados y ajustaremos los estilos para lograr un diseño atractivo con CSS y Angular Pipes.

Paso 1: Instalación de Ionic CLI y Creación del Proyecto

Para empezar, asegúrate de tener Ionic CLI instalado en tu computadora. Esto te permitirá crear y ejecutar proyectos de Ionic fácilmente.

1. Instala Ionic CLI (si aún no lo tienes):

   npm install -g @ionic/cli

2. Crea un nuevo proyecto:

   ionic start CustomSearchApp blank --type=angular

3. Accede al directorio del proyecto:

   cd CustomSearchApp

Paso 2: Configuración Básica del Proyecto en Angular e Ionic

Antes de continuar, ejecuta el proyecto para ver los cambios en tiempo real. Abre el proyecto en tu editor de código favorito y en la terminal, inicia el servidor de desarrollo con:

ionic serve

Esto abrirá el proyecto en un navegador, permitiéndote ver el progreso mientras implementamos el componente ion-searchbar y personalizamos la interfaz.

Paso 3: Crear un Componente de Búsqueda Dedicado

En lugar de añadir todo el código en la página principal, vamos a crear un componente exclusivo para la búsqueda. Esto mejorará la estructura y reutilización del código.

1. Ejecuta el comando para crear un componente:

   ionic generate component search

2. Dirígete a src/app/search/search.component.ts. Aquí definiremos la lista de elementos y la lógica de búsqueda para que el componente ion-searchbar funcione.

Paso 4: Definir los Datos para la Búsqueda en el Componente search.component.ts

Dentro de search.component.ts, añadimos una lista de elementos variados (frutas, verduras y animales) y una función para realizar el filtrado.

import { Component } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
export class SearchComponent {
  searchTerm: string = '';
  items: string[] = [
    'Apple', 'Banana', 'Carrot', 'Dog', 'Elephant', 'Frog', 'Grapes', 'Horse', 'Iceberg Lettuce', 'Jaguar',
    'Kiwi', 'Lion', 'Mango', 'Nectarine', 'Orange', 'Pineapple', 'Quail', 'Rabbit', 'Strawberry', 'Tomato',
    'Umbrella Bird', 'Vegetable', 'Walnut', 'Xylophone Fish', 'Yam', 'Zebra'
  ];

  constructor() {}

  filterItems() {
    return this.items.filter(item => 
      item.toLowerCase().includes(this.searchTerm.toLowerCase()));
  }
}

Paso 5: Crear la Estructura HTML para ion-searchbar y Mostrar Resultados Filtrados

Ahora, vamos a trabajar en el archivo search.component.html para configurar la estructura de la búsqueda con ion-searchbar y mostrar los elementos filtrados en una lista.

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Custom Search</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="filterItems()" placeholder="Search items..."></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let item of filterItems()">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

Explicación de la Estructura HTML:

• ion-header: Define el encabezado de la página de búsqueda.
• ion-toolbar: Contiene el título de la barra de búsqueda.
• ion-searchbar: Barra de búsqueda personalizada con enlace bidireccional ([(ngModel)]) al término de búsqueda.
• ion-list y ion-item: Muestra la lista filtrada de elementos usando *ngFor.

Paso 6: Personalización Básica de la Barra de Búsqueda en search.component.scss

Para mejorar la apariencia de ion-searchbar, añadiremos CSS personalizado. Abre search.component.scss y añade lo siguiente:

ion-searchbar {
  --background: linear-gradient(to right, #ff7e5f, #feb47b);
  --color: white;
  --placeholder-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  margin: 20px;
}

Esto le dará a ion-searchbar un fondo degradado y un texto blanco para una apariencia más sofisticada.

Paso 7: Añadir una Animación Sutil al ion-searchbar

Agregaremos un efecto de escalado (zoom) cuando el usuario pase el cursor sobre ion-searchbar para mejorar la interactividad.

.searchbar-input-container {
  transition: transform 0.2s;
}

&:hover .searchbar-input-container {
  transform: scale(1.05);
}

Paso 8: Añadir una Animación para los Elementos Filtrados

Añadiremos una animación de desvanecimiento a los elementos de la lista filtrada para que aparezcan suavemente.

ion-item {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Paso 9: Crear un Pipe Personalizado para la Búsqueda

Para estructurar mejor el código, vamos a crear un Pipe que maneje la lógica de filtrado. Esto también facilita la reutilización.

1. Ejecuta el comando para crear un Pipe:

   ionic generate pipe filter

2. Dirígete a filter.pipe.ts y agrega el siguiente código:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: string[], searchTerm: string): string[] {
    if (!items || !searchTerm) {
      return items;
    }
    return items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
  }
}

Paso 10: Implementar el Pipe en el HTML

Para usar el Pipe de búsqueda, reemplaza el método de filtrado en el archivo HTML con el Pipe filter.

<ion-list>
  <ion-item *ngFor="let item of items | filter:searchTerm">
    {{ item }}
  </ion-item>
</ion-list>

Paso 11: Añadir el Botón de Limpieza de Búsqueda

Añadimos un botón de limpiar en ion-searchbar para facilitar al usuario el reinicio de la búsqueda.

<ion-searchbar [(ngModel)]="searchTerm" (ionClear)="searchTerm=''" showCancelButton="focus"></ion-searchbar>

Paso 12: Optimización de la Barra de Búsqueda para Dispositivos Móviles

Para mejorar la experiencia en móviles, ajustaremos el tamaño del texto y los márgenes de ion-searchbar.

@media (max-width: 600px) {
  ion-searchbar {
    font-size: 1.2rem;
    margin: 10px;
  }
}

Paso 13: Personalización Avanzada con Iconos Personalizados

Podemos reemplazar el icono de búsqueda con uno personalizado. Cambia el valor de search-icon en ion-searchbar:

<ion-searchbar [(ngModel)]="searchTerm" (ionClear)="searchTerm=''" searchIcon="heart-outline"></ion-searchbar>