Avatar

Avatar in Storybook

Verwendung

Überblick

Ein Avatar ist ein Objekt, das in der globalen Kopfzeile angezeigt wird und die Identität eines Benutzers darstellt. Er ermöglicht den Zugriff auf das Profil des Benutzers und gegebenenfalls auf die allgemeinen Einstellungen. Avatare stärken die Verbindung zwischen Benutzern und Produkten. Sie bieten Benutzern auch ein gewisses Maß an Personalisierung.

Aufbau

Avatar-Bild

Dropdown-Menü für Avatar

Avatare werden als runde Grafiken oben rechts in einer Kopfzeile und dem zugehörigen Dropdown-Menü angezeigt. Benutzer können ein Bild für den Avatar hochladen. Standardmäßig (wenn kein Bild hochgeladen wird) werden die Initialen des Benutzers angezeigt. Das Dropdown-Menü für Avatare enthält auch den Namen und den Titel des Benutzers als Text.

Avatar mit hochgeladenem Bild (enthalten)

Avatare bestehen aus den folgenden Elementen:

1. Standardbild oder hochgeladenes Bild: Benutzer können für ihren Avatar ein Bild hochladen, das als runde Grafik angezeigt wird.
2. Name: Im Dropdown-Menü des Avatars wird der Name des Benutzers als verankerte Beschriftung angezeigt.
3. Rolle: Im Dropdown-Menü des Avatars wird die Rolle oder der Titel des Benutzers unter seinem Namen angezeigt.

Best Practices

• Verwenden Sie Avatare, um anzugeben, wo Benutzer auf ihr Profil und die allgemeinen Einstellungen zugreifen können.
• Verwenden Sie Avatare in einer Benutzeroberfläche oder einer Reihe von zusammenhängenden Produkten einheitlich.
• Verwenden Sie Avatare, um die Beziehung zwischen einem Produkt und seinen Benutzern zu stärken.
• Verwenden Sie Avatare, um Benutzern ein gewisses Maß an Personalisierung zu ermöglichen.

Reaktionsfähigkeit/Anpassungsfähigkeit

• Jutro-Avatare sind in verschiedenen Größen verfügbar und lassen sich so an unterschiedliche Formfaktoren anpassen.
• Dank des responsiven Jutro-Designs können Avatare wie die meisten anderen Komponenten über die Komponenten <Grid> und <Flex> verteilt, in der Größe verändert und angeordnet werden.

Interaktionen

Maus

• Beim Zeigen auf die runde Grafik eines Avatars wird eine QuickInfo mit dem Namen des Benutzers angezeigt.
• Beim Klicken auf die runde Grafik des Avatars wird ein Dropdown-Menü angezeigt.
• Beim Bewegen des Mauszeigers über die Beschriftungen im Dropdown-Menü werden diese hervorgehoben.

Tastatur

Die Avatar-Kopfzeile dient als Schaltfläche. Mit LEERTASTE und EINGABETASTE wird der Inhalt erweitert und reduziert.

Screenreader

Im Benutzernamenfeld kann ein alternativer Text eingegeben werden. Wenn kein Wert angegeben wird, wird standardmäßig „Benutzer-Avatar“ verwendet. Durch das WAI-ARIA-Attribut aria-haspopup="true" werden Benutzer von Screenreadern über vorhandene Inhalte im Avatar informiert. Das Attribut aria-expanded wechselt zwischen „true“ und „false“, um den Zustand der Komponenten anzugeben, d. h., ob sie erweitert oder reduziert angezeigt wird.

Fehlerbedingungen

Wenn kein Bild für den Avatar verfügbar ist, werden stattdessen die Initialen des Benutzers angezeigt. Wenn die Initialen des Benutzers nicht gerendert werden können (z. B. bei Namen, bei denen nicht das lateinische Alphabet verwendet wird), wird ein Standardsymbol angezeigt.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Achten Sie in Ihrer Anwendung darauf, dass eventueller Alternativtext aussagekräftig ist.

Note:

Die @jutro/auth -Abhängigkeit ist nun optional für @jutro/router und @jutro/components-Pakete. Allerdings erfordert die Avatar-Komponente, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt wird, um verwendet werden zu können.

Code

import { Avatar } from '@jutro/components';

<Avatar />;

Importanweisung

import { Avatar } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

Standardwert

PersonIcon

imageSource

Typ

string

Beschreibung

Path to an image. If provided, it takes precedence over the user's initials or an icon.

isNotButton

Typ

boolean

Beschreibung

If set to true, the component will be rendered as span instead of a button.

messageProps

Typ

{ userAvatar: intlMessageShape }

Beschreibung

Message props for an error message or aria-label.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

showImageBorder

Typ

boolean

Beschreibung

If set to true, a border will be displayed around the component.

useAuthInfo

Typ

boolean

Beschreibung

If set to true, displays the user's information based on the authentication client instead of the passed props.

username

Typ

string

Beschreibung

User's first and last names, used as the component's alt text and to display initials if no image is selected.

Hooks

Für avatar sind keine Hooks verfügbar.

Übersetzungsschlüssel

Mit der Avatar-Komponente ist ein Übersetzungsschlüssel verknüpft:

Schlüssel	Verwendet für
jutro-components.widgets.Avatar.useravatar	aria-label-Wert für das Avatar-Bild

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Avatars und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für einen einfachen Avatar

Ein einfacher Avatar rendert eine Schaltfläche, die ein kreisförmiges Bild enthält. Standardmäßig wird das Personensymbol aus dem Symbolpaket von Jutro angezeigt.

import { Avatar } from '@jutro/components';

<Avatar />;

Beispiel für benutzerdefiniertes Symbol

Die Eigenschaft icon ermöglicht es Ihnen, ein beliebiges Jutro-Symbol als Standardsymbol zu verwenden. Weitere Informationen zu Jutro-Symbolen finden Sie auf der Seite der Icon-Komponente.

import { Avatar } from '@jutro/components';
import { HelpIcon } from '@jutro/icons';

<Avatar icon={HelpIcon} />;

Beispielbild

Die Avatar-Komponente zeigt jedes beliebige Bild mit der Eigenschaft imageSource an. Die Größe des Bilds wird so angepasst, dass es in den Kreis passt. Im folgenden Beispiel ist die Quelle ein quadratisches Bild mit einer Größe von 32 x 32, das so in der Größe angepasst wird, dass es in den Standardkreis passt.

import { Avatar } from '@jutro/components';

<Avatar imageSource="/path/to/image" />;

Beispiel für Authentifizierungsinformationen

Sie können die Avatar-Komponente so festlegen, dass der Inhalt des Authentifizierungs-Clients über die Eigenschaft useAuthInfo angezeigt wird.

import { Avatar } from '@jutro/components';

<Avatar useAuthInfo />;

Beispiel für einen Benutzernamen

Die Eigenschaft username wird als Alternativtext verwendet. Wenn kein imageSource-Wert festgelegt ist, werden außerdem die Initialen aus der Zeichenfolge des Benutzernamens anstelle eines Symbols angezeigt.

import { Avatar } from '@jutro/components';

<Avatar
  username="John Doe"
  imageSource='/path/to/image'
/>
<Avatar
  username="John Doe"
  icon={HelpIcon}
/>
<Avatar
  username="John Doe"
/>

Änderungsprotokoll

10.9.0

icon-Eigenschaftstyp erweitert

Der Typ der Eigenschaft icon wurde auf string | React.ComponentType erweitert.

Abkündigungen

Die Übergabe von string als Wert an die Eigenschaft icon wurde abgekündigt.