Zum Hauptinhalt springen

Avatar

Avatar in Storybook

Beispiele​

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

Einfaches Beispiel​

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 Symbolkomponentenseite.

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 Bildes 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, dessen Größe so 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 einstellen, 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"
/>