Dropdown-Menü-Avatar

Verwendung

Die Anwendungsrichtlinien für diese Komponente werden derzeit erarbeitet und sind in einer künftigen Version verfügbar.

Code

<DropdownMenuAvatar id="basicExample">
  <DropdownMenuHeader title="Heading">
    This is a header
  </DropdownMenuHeader>
  <DropdownMenuLink
    onClick={() => {}}
    to="/example"
  >
    First menu item (internal link)
  </DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink
    href="http://example.com"
    onClick={() => {}}
  >
    Second menu item (external link)
  </DropdownMenuLink>
</DropdownMenuAvatar>

Importanweisung

import { DropdownMenuAvatar } 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

iderforderlich: Typ
string
Beschreibung
The identifier used for the drop-down menu component.
alignRight: Typ
bool
Beschreibung
If set to true, items are aligned to the right edge of the menu.
authLinksClassName: Typ
string
Beschreibung
Additional CSS class for the drop-down menu avatar authentication links.
autoFocus: Typ
bool
Beschreibung
If set to true, the first menu item gets focused after opening the drop-down menu.
children: Typ
node
Beschreibung
The component children, wrapped by the drop-down menu avatar component. This can include DropdownMenu components.
className: Typ
string
Beschreibung
Additional component styling class name which is passed to the component.
dropdownClassName: Typ
string
Beschreibung
Optional CSS class for the drop-down menu.
dropUp: Typ
bool
Beschreibung
If set to true, the menu appears above the trigger component.
headerClassName: Typ
string
Beschreibung
Additional CSS class for the drop-down menu avatar header.
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'.
imageSource: Typ
string
Beschreibung
The path to a user image, preferentially shown before user initials or icon.
isOpen: Typ
bool
Beschreibung
If set to true, the menu is currently visible to the user.
messageProps: Typ
{ userAvatar: intlMessageShape }
Beschreibung
The message props to generate an error message or aria-label.
onBeforeLogout: Typ
(() => void | Promise<void>) | undefined
Beschreibung
Callback to be called before Okta logout.
separatorClassName: Typ
string
Beschreibung
Optional CSS class for the drop-down menu separator.
showImageBorder: Typ
bool
Beschreibung
If set to true, displays the image border.
subtitle: Typ
IntlMessageShape
Beschreibung
The menu header subtitle text.
title: Typ
IntlMessageShape
Beschreibung
The menu header title text.
useAuthInfo: Typ
bool
Beschreibung
If set to true, displays header information from Okta (if available) and the logout menu link.
username: Typ
string
Beschreibung
The user's first and last name, used as the component's alt text and to display initials if no image is selected.

Hooks

Für drop-down menu avatar sind keine Hooks verfügbar.

Übersetzungsschlüssel

Die drop-down menu avatar-Komponente definiert die folgenden Übersetzungsschlüssel:

Schlüssel	Verwendet für
jutro-router.DropdownMenu.Logout	`aria-label`-Wert für eine Abmelden-Schaltfläche.
jutro-router.DropdownMenu.ProfileMenu	`aria-label`-Wert für eine Profil-Schaltfläche.

Escape Hatches

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

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer drop-down menu avatar-Komponente und den verschiedenen verfügbaren Konfigurationsoptionen.

Ein Dropdown-Menü-Avatar ist ein Avatar, der wie eine Dropdown-Menüschaltfläche funktioniert. Wenn ein Benutzer auf den Avatar klickt, wird ein Dropdown-Menü geöffnet, das mithilfe der auf der Seite Dropdown-Menüschaltfläche dokumentierten untergeordneten Dropdown-Komponenten definiert wird.

<DropdownMenuAvatar id="basicExample">
  <DropdownMenuHeader title="Heading">
    <DropdownMenuLink
      onClick={() => {}}
      to="/example"
    >
      Menu item in a header (internal link)
    </DropdownMenuLink>
  </DropdownMenuHeader>
  <DropdownMenuLink
    onClick={() => {}}
    to="/example"
  >
    First menu item (internal link)
  </DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink
    href="http://example.com"
    onClick={() => {}}
  >
    Second menu item (external link)
  </DropdownMenuLink>
</DropdownMenuAvatar>

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 { HelpIcon } from '@jutro/icons';

<DropdownMenuAvatar 
  id="iconExample"
  icon={HelpIcon}>
  ...
</DropdownMenuAvatar>

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 Pixel, das so in der Größe angepasst wird, dass es in den Standardkreis passt.

<DropdownMenuAvatar 
  id="imageExample"
  imageSource='/path/to/image'
>
  ...
</DropdownMenuAvatar>

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

<DropdownMenuAvatar
  id="authExample"
  useAuthInfo
>
  ...
</DropdownMenuAvatar>

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.

<DropdownMenuAvatar
  id="usernameExample1"
  username="John Doe"
  imageSource='/path/to/image'
>
  ...
</DropdownMenuAvatar>
<DropdownMenuAvatar
  username="John Doe"
  id="usernameExample2"
  icon={HelpIcon}
>
  ...
</DropdownMenuAvatar>
<DropdownMenuAvatar
  username="John Doe"
  id="usernameExample3"
>
  ...
</DropdownMenuAvatar>

Dropdown-Menü-Avatar

Verwendung

Code

Importanweisung

Komponentenvertrag

Eigenschaften

`id`erforderlich

`alignRight`

`authLinksClassName`

`autoFocus`

`children`

`className`

`dropdownClassName`

`dropUp`

`headerClassName`

`icon`

`imageSource`

`isOpen`

`messageProps`

`onBeforeLogout`

`separatorClassName`

`showImageBorder`

`subtitle`

`title`

`useAuthInfo`

`username`

Hooks

Übersetzungsschlüssel

Escape Hatches

Beispiele

Einfacher Dropdown-Menü-Avatar