Chip

Chips sind kompakte Elemente, die eine Eingabe, ein Attribut oder eine Aktion darstellen. Sie ermöglichen es Benutzern, Informationen einzugeben, Auswahlen zu treffen, Inhalte zu filtern oder Aktionen auszulösen.

Verwendung

Um den Chip zu verwenden, importieren Sie ihn aus Ihren Komponenten und übergeben Sie die erforderlichen Eigenschaften wie children, colorScheme, size, error, outlined, onClick und icon.

Einfacher Chip

Ein einfacher Chip mit minimaler Konfiguration. Er zeigt ein Stück Text oder ein Tag an.

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

export default function ChipBasicDemo() {
    return (
        <Chip>
            Basic Chip
        </Chip>
    );
}

Chip-Größen

Veranschaulicht die Verwendung verschiedener Größen für die Chip-Komponente. Sie können zwischen tiny, small und medium wählen.

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

export default function ChipSizesDemo() {
    return (
        <>
            <Chip size="small">Small Chip</Chip>
            <Chip size="medium">Medium Chip</Chip>
            <Chip size="large">Large Chip</Chip>
        </>
    );
}

Chip-Farben

Demonstriert die Verwendung der Eigenschaft colorScheme, um das Aussehen des Chips an das Thema Ihrer Anwendung anzupassen.

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

export default function ChipColorsDemo() {
    return (
        <div className={"flex flex-wrap gap-2"}>
            <Chip colorScheme="blueLighter">blueLighter</Chip>
            <Chip colorScheme="cyanLighter">cyanLighter</Chip>
            <Chip colorScheme="tealLighter">tealLighter</Chip>
            <Chip colorScheme="greenLighter">greenLighter</Chip>
            <Chip colorScheme="yellowLighter">yellowLighter</Chip>
            <Chip colorScheme="orangeLighter">orangeLighter</Chip>
            <Chip colorScheme="redLighter">redLighter</Chip>
            <Chip colorScheme="pinkLighter">pinkLighter</Chip>
            <Chip colorScheme="purpleLighter">purpleLighter</Chip>
            <Chip colorScheme="grayLighter">grayLighter</Chip>

            <Chip colorScheme="blueLight">blueLight</Chip>
            <Chip colorScheme="cyanLight">cyanLight</Chip>
            <Chip colorScheme="tealLight">tealLight</Chip>
            <Chip colorScheme="greenLight">greenLight</Chip>
            <Chip colorScheme="yellowLight">yellowLight</Chip>
            <Chip colorScheme="orangeLight">orangeLight</Chip>
            <Chip colorScheme="redLight">redLight</Chip>
            <Chip colorScheme="pinkLight">pinkLight</Chip>
            <Chip colorScheme="purpleLight">purpleLight</Chip>
            <Chip colorScheme="grayLight">grayLight</Chip>

            <Chip colorScheme="blueDark">blueDark</Chip>
            <Chip colorScheme="cyanDark">cyanDark</Chip>
            <Chip colorScheme="tealDark">tealDark</Chip>
            <Chip colorScheme="greenDark">greenDark</Chip>
            <Chip colorScheme="yellowDark">yellowDark</Chip>
            <Chip colorScheme="orangeDark">orangeDark</Chip>
            <Chip colorScheme="redDark">redDark</Chip>
            <Chip colorScheme="pinkDark">pinkDark</Chip>
            <Chip colorScheme="purpleDark">purpleDark</Chip>
            <Chip colorScheme="grayDark">grayDark</Chip>

            <Chip colorScheme="blueDarker">blueDarker</Chip>
            <Chip colorScheme="cyanDarker">cyanDarker</Chip>
            <Chip colorScheme="tealDarker">tealDarker</Chip>
            <Chip colorScheme="greenDarker">greenDarker</Chip>
            <Chip colorScheme="yellowDarker">yellowDarker</Chip>
            <Chip colorScheme="orangeDarker">orangeDarker</Chip>
            <Chip colorScheme="redDarker">redDarker</Chip>
            <Chip colorScheme="pinkDarker">pinkDarker</Chip>
            <Chip colorScheme="purpleDarker">purpleDarker</Chip>
            <Chip colorScheme="grayDarker">grayDarker</Chip>
        </div>
    );
}

Chip mit Icon

Zeigt, wie ein Chip mit einem Icon für eine bessere Benutzerinteraktion oder zur Bereitstellung weiterer Informationen im Chip verwendet wird.

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

export default function ChipIconDemo() {
    return (
        <Chip icon={<FaceIcon size={"small"}/>}>
            Chip with Icon
        </Chip>
    );
}

Klickbarer Chip

Dieses Beispiel demonstriert einen klickbaren Chip, der beim Anklicken eine Aktion auslöst. Nützlich für interaktive Tags oder Auswahlen.

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

export default function ChipClickableDemo() {
    const handleClick = () => {
        console.log("Chip clicked");
    };

    return (
        <Chip onClick={handleClick}>
            Clickable Chip
        </Chip>
    );
}