Suchleiste (SearchBar)

Die SearchBar-Komponente ist für die Implementierung von Suchfunktionen konzipiert. Sie unterstützt Funktionen wie Entprellen (Debouncing) der Sucheingabe, erweiterbare Eingabegrößen und die Anzeige des Ladezustands.

Verwendung

Um die SearchBar zu verwenden, importieren Sie sie aus Ihren Komponenten und übergeben Sie die erforderlichen Props wie onTextSearch, placeholder, expandable, large, autoFocus, disabled, loading und inputRef.

Einfache Suchleiste

Die grundlegende Verwendung der SearchBar mit minimaler Konfiguration.

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

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

Suchleiste mit Ladezustand

Eine Darstellung der SearchBar mit Anzeige eines Ladeindikators.

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

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

Erweiterbare Suchleiste

Dieses Beispiel zeigt, wie man die SearchBar beim Fokussieren erweiterbar macht.

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

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

Große Suchleiste

Zeigt eine größere Variante der SearchBar.

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

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