Avatar

Avatare sind visuelle Platzhalter zur Darstellung von Benutzern oder Entitäten. Sie können Bilder oder Initialen enthalten und werden häufig in Headern, Listen und überall dort verwendet, wo Benutzerinformationen präsentiert werden.

Bild-Avatar

Die Eigenschaft src gibt die Bild-URL für den Avatar an.

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

export default function AvatarImageDemo() {
    return (
        <Avatar
            src="https://avatars.githubusercontent.com/u/5120271?v=4"
            alt="User Name"
        />
    );
}

Text-Avatar

Wenn die Eigenschaft src nicht bereitgestellt wird, kann der Avatar Text wie Benutzerinitialen anzeigen.

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

export default function AvatarTextDemo() {
    return (
        <Avatar>
            AB
        </Avatar>
    );
}

Benutzerdefiniertes Styling

Die Eigenschaft className ermöglicht es Ihnen, benutzerdefinierte CSS-Klassen an die Avatar-Komponente zu übergeben.

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

export default function CustomStyleAvatarDemo() {
    return (
        <Avatar
            className="bg-red-500 dark:bg-red-700"
            // Example of custom size
            style={{ width: '80px', height: '80px' }}
        >
            CD
        </Avatar>
    );
}