Schalter (BooleanSwitch)

BooleanSwitch ist eine Komponente zum Umschalten zwischen true, false oder einem unbestimmten (indeterminate) Zustand. Sie bietet eine binäre Wahl oder einen optionalen dritten Zustand, der häufig als fehlende Präferenz interpretiert wird.

Verwendung

Importieren Sie BooleanSwitch aus @firecms/ui und übergeben Sie value sowie optional einen Callback mit onValueChange, um die Zustandsänderungen zu verarbeiten.

Standard-Schalter

Beispiel für einen einfachen Schalter, der zwischen true und false umschaltet.

import React, { useState } from "react";
import { BooleanSwitch } from "@firecms/ui";

export default function BooleanSwitchDefaultDemo() {
    const [value, setValue] = useState(true);
    return (
        <BooleanSwitch
            value={value}
            onValueChange={setValue}
        />
    );
}

Unbestimmter Zustand

Beispiel für einen Schalter, der zwischen true, false und null (unbestimmt) umschaltet.

import React, { useState } from "react";
import { BooleanSwitch } from "@firecms/ui";

export default function BooleanSwitchIndeterminateDemo() {
    const [value, setValue] = useState<boolean | null>(null);
    return (
        <BooleanSwitch
            value={value}
            allowIndeterminate={true}
            onValueChange={setValue}
        />
    );
}

Größenvarianten

Die BooleanSwitch-Komponente kann verschiedene Größen haben, die durch die Eigenschaft size gesteuert werden.

import React, { useState } from "react";
import { BooleanSwitch } from "@firecms/ui";

export default function BooleanSwitchSizeDemo() {
    const [value, setValue] = useState<boolean | null>(true);

    return (
        <>
            <BooleanSwitch
                value={value}
                size="small"
                onValueChange={setValue}
            />
            <BooleanSwitch
                value={value}
                size="medium"
                onValueChange={setValue}
            />
        </>
    );
}

Deaktivierter Zustand

Ein deaktivierter BooleanSwitch lässt keine Benutzerinteraktion zu und hebt sich visuell ab.

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

export default function BooleanSwitchDisabledDemo() {
    return (
        <BooleanSwitch
            value={true}
            disabled={true}
        />
    );
}