SAvatar <s-avatar>

Zeigt das Bild einer Person oder eines Unternehmens an oder deren Initialen, wenn kein Bild vorhanden ist. SAvatar ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-avatar>.

import { SAvatar } from 'polaris-vue-elements'

Best Practices

• Größe an den Kontext anpassen. Wählen Sie für dichte Layouts wie Tabellen und Listen eine kleinere size und auf Profilseiten, auf denen die Person im Mittelpunkt steht, eine größere.
• Hilfreichen Alternativtext schreiben. Setzen Sie alt auf die Person oder Sache, die der Avatar darstellt, etwa den Namen einer Person oder Firma. Steht dieser Name bereits als Text neben dem Avatar, verwenden Sie stattdessen ein leeres alt.
• Neben dem Dargestellten platzieren. Setzen Sie den Avatar direkt neben den Namen oder die Entität, für die er steht, damit der Zusammenhang in Listen, Tabellen und Cards klar ist.

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-avatar> (auf Englisch).

Beispiel

Die folgenden Bilder werden zu reinen Demozwecken von picsum.photos geladen, einem Platzhalterbild-Dienst eines Drittanbieters.

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	Typ	Beschreibung
alt	string	Alternativtext, der den Avatar für die Barrierefreiheit beschreibt. Liefert Nutzern assistiver Technologien eine Textbeschreibung des Avatars und dient als Fallback, wenn der Avatar nicht geladen werden kann. Eine gut geschriebene Beschreibung ermöglicht Menschen mit Sehbehinderungen, Nicht-Text-Inhalte zu verstehen. Trifft ein Screenreader auf einen Avatar, liest er diese Beschreibung vor. Kann ein Avatar nicht geladen werden, wird dieser Text auf dem Bildschirm angezeigt, sodass alle Nutzer verstehen, welcher Inhalt vorgesehen war. Mehr zum Schreiben wirksamer Alt-Texte und zum alt-Attribut.
initials	string	Die Initialen, die im Avatar angezeigt werden, wenn kein Bild angegeben ist oder es nicht geladen werden kann. Typischerweise ein oder zwei Zeichen für die Initialen von Vor- und Nachname einer Person, etwa "JD" für John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	Die Größe des Avatar-Bildes. - small-200: Sehr kleiner Avatar, geeignet für kompakte Darstellungen oder Listen mit vielen Einträgen. - small-100: Alias von small. - small: Kleiner Avatar, gut für sekundäre Kontexte oder enge Layouts. - base: Standardgröße, die in den meisten Kontexten gut funktioniert. - large: Großer Avatar zur Hervorhebung oder wenn der Avatar im Mittelpunkt steht. - large-100: Alias von large. - large-200: Sehr großer Avatar für eine prominente Darstellung.
src	string	Die URL oder der Pfad zum Avatar-Bild. Wenn angegeben, hat das Bild Vorrang vor initials. Lädt das Bild nicht oder nur langsam, werden initials als Fallback gerendert.

Events

Event	Typ
error	Event
load	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @error auf <SAvatar>.