Barra de busca

O componente SearchBar é projetado para implementar funcionalidades de busca. Suporta recursos como debounce de entrada de busca, tamanhos de entrada expansíveis e exibição de estado de carregamento.

Uso

Para usar a SearchBar, importe-a dos seus componentes e passe as props necessárias como onTextSearch, placeholder, expandable, large, autoFocus, disabled, loading e inputRef.

SearchBar básica

O uso básico da SearchBar com configuração mínima.

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

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

SearchBar com estado de carregamento

Uma demonstração da SearchBar mostrando um indicador de carregamento.

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

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

SearchBar expansível

Este exemplo mostra como tornar a SearchBar expansível ao focar.

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

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

SearchBar grande

Mostra uma variante maior da SearchBar.

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

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