Avatar

<pc-avatar>

0.1.0

experimental

Avatars werden verwendet, um eine Person oder ein Objekt darzustellen.

Standardmäßig wird ein allgemeines Icon angezeigt. Du kannst Avatars personalisieren, indem du eigene Icons, Initialen oder Bilder hinzufügst. Du solltest für assistive Technologien (z. B. Screenreader) immer ein label angeben.

<pc-avatar label="Benutzer‐Avatar"></pc-avatar>

Code

Edit

Demos

Bilder

Um ein Bild für den Avatar zu verwenden, setze die Attribute image und label. Das Bild hat Priorität und wird vor Initialen oder Icons angezeigt. Avatar‐Bilder können verzögert geladen werden, indem du das Attribut loading auf lazy setzt.

<pc-avatar image="/favicon.svg" label="Placer Toolkit‐Avatar"></pc-avatar>

Code

Edit

Initialen

Wenn du kein Bild zur Hand hast, kannst du das initials‐Attribut nutzen, um etwas Persönlicheres als ein einfaches Icon anzuzeigen.

<pc-avatar initials="PC" label="Avatar mit Initialen: PC"></pc-avatar>

Code

Edit

Eigene Icons

Wenn weder Bild noch Initialen gesetzt sind, wird ein Icon angezeigt. Der Standard‐Avatar nutzt das Font Awesome user Icon, aber du kannst dies über den icon‐Slot anpassen.

<pc-avatar label="Avatar mit Bild‐Icon">
    <pc-icon
        library="default"
        icon-style="solid"
        name="image"
        slot="icon"
    ></pc-icon>
</pc-avatar>

<pc-avatar label="Avatar mit ZIP‐Datei‐Icon">
    <pc-icon
        library="default"
        icon-style="solid"
        name="file-zipper"
        slot="icon"
    ></pc-icon>
</pc-avatar>

<pc-avatar label="Avatar mit Koffer‐Icon">
    <pc-icon
        library="default"
        icon-style="solid"
        name="suitcase"
        slot="icon"
    ></pc-icon>
</pc-avatar>

Code

Edit

Formen

Die Form des Avatars kann über das shape‐Attribut geändert werden.

<pc-avatar shape="square" label="Quadratischer Avatar"></pc-avatar>
<pc-avatar shape="rounded" label="Abgerundeter Avatar"></pc-avatar>
<pc-avatar shape="circle" label="Kreisförmiger Avatar"></pc-avatar>

Code

Edit

Avatar-Gruppen

Mit ein paar Zeilen CSS kannst du Avatars in einer Gruppe zusammenfassen.

<div class="avatar-group">
    <pc-avatar
        image="[https://placer-toolkit.vercel.app/brand/logo-in-circle.svg](https://placer-toolkit.vercel.app/brand/logo-in-circle.svg)"
        label="Placer Toolkit‐Avatar (Original, 1 von 4)"
    ></pc-avatar>
    <pc-avatar
        image="[https://placer-toolkit.vercel.app/brand/logo-in-circle.svg](https://placer-toolkit.vercel.app/brand/logo-in-circle.svg)"
        label="Placer Toolkit‐Avatar (Graustufen-Filter, 2 von 4)"
    ></pc-avatar>
    <pc-avatar
        image="[https://placer-toolkit.vercel.app/brand/logo-in-circle.svg](https://placer-toolkit.vercel.app/brand/logo-in-circle.svg)"
        label="Placer Toolkit‐Avatar (Farbton um 180° gedreht, 3 von 4)"
    ></pc-avatar>
    <pc-avatar
        image="[https://placer-toolkit.vercel.app/brand/logo-in-circle.svg](https://placer-toolkit.vercel.app/brand/logo-in-circle.svg)"
        label="Placer Toolkit‐Avatar (Sepia-Filter, 4 von 4)"
    ></pc-avatar>
</div>

<style>
    .avatar-group pc-avatar:not(:first-of-type) {
        margin-inline-start: -1em;
    }

    .avatar-group pc-avatar:nth-child(2) {
        filter: grayscale(100%);
    }

    .avatar-group pc-avatar:nth-child(3) {
        filter: hue-rotate(180deg);
    }

    .avatar-group pc-avatar:last-child {
        filter: sepia(100%);
    }

    .avatar-group pc-avatar::part(base) {
        border: var(--pc-border-width-m) var(--pc-border-style)
            var(--pc-color-surface-default);
    }
</style>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`image`	The image source to use for the avatar. Typ: `string`	`""`
`label`	A label to use to describe the avatar to assistive devices. Typ: `string`	`""`
`initials`	Initials to use as a fallback when no image is available (1–2 characters recommended). Typ: `string`	`""`
`loading`	Indicates how the browser should load the image. Typ: `"eager" \| "lazy"`	`"eager"`
`shape`	The shape of the avatar. Typ: `"circle" \| "rounded" \| "square"`	`"circle"`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
`icon`	The default icon to use when no image or initials are present. Works best with `<pc-icon>`.

Erfahre mehr über die Benutzung von Slots.

Events

Name	Beschreibung	Event‐Detail
`pc-error`	Emitted when the image couldn’t be loaded. This may be because of an invalid URL, a temporary network error or some other unknown cause.	‐

Erfahre mehr über Events.

Benutzerdefinierte Eigenschaften

Name	Beschreibung	Standard
`--size`	The size of the avatar.	`3rem`

Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

Parts

Name	Beschreibung
`base`	The component’s base wrapper.
`icon`	The container that wraps the avatar’s icon.
`initials`	The container that wraps the avatar’s initials.
`image`	The avatar image. Only shown when the `image` attribute is set.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/avatar/avatar.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/avatar/avatar.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/avatar/avatar.js";

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten:

Icon