Barra di ricerca

Il componente SearchBar è progettato per implementare funzionalità di ricerca. Supporta funzionalità come debounce dell’input di ricerca, dimensioni input espandibili e stato di caricamento.

Utilizzo

Per usare la SearchBar, importala dai tuoi componenti e passa le prop necessarie come onTextSearch, placeholder, expandable, large, autoFocus, disabled, loading e inputRef.

SearchBar di base

L’utilizzo base della SearchBar con configurazione minima.

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

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

SearchBar con stato di caricamento

Una dimostrazione della SearchBar che mostra un indicatore di caricamento.

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

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

SearchBar espandibile

Questo esempio mostra come rendere la SearchBar espandibile al focus.

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

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

SearchBar grande

Mostra una variante più grande della SearchBar.

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

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