Auswahl (Select)

Select ist eine Formularkomponente, die ein Dropdown-Menü bereitstellt, aus dem Benutzer unter mehreren Optionen wählen können. Sie unterstützt Einzel- und Mehrfachauswahl, anpassbare Stile und die Integration mit Formularbibliotheken.

Verwendung

Um die Select-Komponente in Ihrer Webanwendung zu verwenden, beginnen Sie damit, sie zusammen mit SelectItem für einzelne Optionen und SelectGroup (falls Sie verwandte Optionen gruppieren möchten) zu importieren. Die Select-Komponente kann stark an Ihre spezifischen Anforderungen an die Benutzeroberfläche angepasst werden. Sie können ihr Erscheinungsbild steuern, wie z. B. ihre Größe, Form und Farbe, um dem Gesamtdesign Ihrer Anwendung zu entsprechen. Außerdem können Sie ihr Verhalten anpassen, einschließlich der Handhabung von Benutzerinteraktionen, ob Mehrfachauswahl unterstützt wird und wie ausgewählte Elemente angezeigt werden. Dieses Maß an Anpassung macht sie zu einem vielseitigen Werkzeug für die Erstellung intuitiver und responsiver Dropdown-Menüs, die die Benutzererfahrung verbessern.

Einfaches Select

Eine grundlegende Verwendung der Select-Komponente mit minimaler Konfiguration.

import React from "react";
import { Select, SelectItem } from "@firecms/ui";

export default function SelectBasicDemo() {
    const [selected, setSelected] = React.useState<string>();

    return (
        <Select
            value={selected}
            size={"large"}
            onValueChange={setSelected}
            placeholder={<i>Select a character</i>}
            renderValue={(value) => {
                if (value === "homer") {
                    return "Homer";
                } else if (value === "marge") {
                    return "Marge";
                } else if (value === "bart") {
                    return "Bart";
                } else if (value === "lisa") {
                    return "Lisa";
                }
                throw new Error("Invalid value");
            }}
        >
            <SelectItem value="homer">Homer</SelectItem>
            <SelectItem value="marge">Marge</SelectItem>
            <SelectItem value="bart">Bart</SelectItem>
            <SelectItem value="lisa">Lisa</SelectItem>
        </Select>
    );
}

Angepasstes Select

Eine Select-Komponente mit benutzerdefinierten Stilen und Funktionen.

import React from "react";
import { Chip, Select, SelectItem } from "@firecms/ui";

const beverages = {
    coffee: "Coffee",
    tea: "Tea",
    juice: "Juice",
    soda: "Soda",
    water: "Water"
}

export default function SelectCustomDemo() {
    const [selected, setSelected] = React.useState("");

    return (
        <Select
            value={selected}
            onValueChange={setSelected}
            size="medium"
            className="w-[400px] bg-yellow-200 dark:bg-yellow-800"
            inputClassName="custom-input-class"
            placeholder="Select your drinks"
            renderValue={(value) => {
                return <Chip key={value}>{beverages[value]}</Chip>;
            }}
        >
            {Object.entries(beverages).map(([value, label]) => (
                <SelectItem key={value} value={value}>
                    {label}
                </SelectItem>
            ))}
        </Select>
    );
}

Select mit Gruppen

Demonstriert, wie Optionen mithilfe von SelectGroup unter Labels gruppiert werden.

import React from "react";
import { Select, SelectItem, SelectGroup } from "@firecms/ui";

export default function SelectGroupDemo() {
    const [selected, setSelected] = React.useState("");

    return (
        <Select
            size={"large"}
            value={selected}
            onValueChange={setSelected}
            placeholder="Select an option"
        >
            <SelectGroup label="Group 1">
                <SelectItem value="option1-1">Option 1-1</SelectItem>
                <SelectItem value="option1-2">Option 1-2</SelectItem>
            </SelectGroup>
            <SelectGroup label="Group 2">
                <SelectItem value="option2-1">Option 2-1</SelectItem>
                <SelectItem value="option2-2">Option 2-2</SelectItem>
            </SelectGroup>
        </Select>
    );
}

Select-Komponenten-Props

Die Select-Komponente in FireCMS UI ist über verschiedene Props stark anpassbar. Nachfolgend finden Sie eine umfassende Liste der Props, mit denen Sie die Select-Komponente an Ihre Anforderungen anpassen können:

• open: Steuert, ob das Select-Dropdown geöffnet ist. Standard: false.
• name: Das name-Attribut für das Select-Eingabeelement.
• id: Das id-Attribut für das Select-Eingabeelement.
• onOpenChange: Callback, wenn sich der Öffnungsstatus ändert.
• value: Der aktuelle Wert (oder die Werte) der Select-Komponente, kann ein string oder ein Array von strings für Mehrfachauswahl sein.
• className: Zusätzliche Klassen, die auf das Root-Element angewendet werden.
• inputClassName: Zusätzliche Klassen, die auf das Eingabeelement angewendet werden.
• onChange: Handler-Funktion, die aufgerufen wird, wenn sich der Select-Wert ändert.
• onValueChange: Callback, wenn sich der Wert ändert.
• onMultiValueChange: Callback, wenn sich der Wert in einem Mehrfach-Select ändert.
• placeholder: Der Platzhaltertext, der angezeigt wird, wenn kein Wert ausgewählt ist.
• renderValue: Benutzerdefinierte Render-Funktion für den ausgewählten Wert.
• renderValues: Benutzerdefinierte Render-Funktion für die ausgewählten Werte in einem Mehrfach-Select.
• size: Die Größe der Select-Komponente, kann "small" oder "medium" sein. Standard: "medium".
• label: Das Label, das über dem Select-Feld angezeigt wird, kann ein ReactNode oder ein string sein.
• disabled: Deaktiviert die Select-Komponente. Standard: false.
• error: Versetzt die Select-Komponente in einen Fehlerzustand. Standard: false.
• position: Position des Dropdowns relativ zum Trigger, kann "item-aligned" oder "popper" sein. Standard: "item-aligned".
• endAdornment: Element, das am Ende der Select-Eingabe platziert wird.
• multiple: Aktiviert den Mehrfachauswahl-Modus. Standard: false.
• inputRef: Ref-Objekt für das Select-Eingabeelement.
• padding: Fügt der Select-Eingabe einen Innenabstand hinzu. Standard: true.
• invisible: Versteckt die Select-Komponente, behält sie aber im DOM.
• children: Inhalt, der als Optionen innerhalb der Select-Komponente gerendert wird.