Barra de búsqueda (SearchBar)

El componente SearchBar (Barra de búsqueda) está diseñado para implementar funcionalidades de búsqueda. Admite funciones como entrada de búsqueda con retraso (debouncing), tamaños de entrada expandibles y visualización del estado de carga.

Uso

Para usar SearchBar, impórtalo desde tus componentes y pasa las props necesarias como onTextSearch (al buscar texto), placeholder (marcador de posición), expandable (expandible), large (grande), autoFocus (autofoco), disabled (deshabilitado), loading (cargando) e inputRef (referencia de entrada).

Barra de búsqueda básica

El uso básico de SearchBar con una configuración mínima.

import React from "react";
import { SearchBar } from "@firecms/ui";

export default function SearchBarBasicDemo() {
    return (
        <SearchBar onTextSearch={(text) => console.log("Search:", text)} />
    );
}

Barra de búsqueda con estado de carga

Una demostración de SearchBar mostrando un indicador de carga.

import React from "react";
import { SearchBar } from "@firecms/ui";

export default function SearchBarLoadingDemo() {
    return (
        <SearchBar loading />
    );
}

Barra de búsqueda expandible

Este ejemplo muestra cómo hacer que SearchBar se expanda al enfocar (focus).

import React from "react";
import { SearchBar } from "@firecms/ui";

export default function SearchBarExpandableDemo() {
    return (
        <SearchBar expandable />
    );
}

Barra de búsqueda grande

Muestra un variante más grande del SearchBar.

import React from "react";
import { SearchBar } from "@firecms/ui";

export default function SearchBarLargeDemo() {
    return (
        <SearchBar large />
    );
}