Avatar de menu déroulant
Utilisation
Les directives d’utilisation de ce composant sont en cours d’élaboration et seront disponibles dans une version ultérieure.
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>
Instruction d'importation
import { DropdownMenuAvatar } from '@jutro/components';
Cahier des charges du composant
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Propriétés
idobligatoire- Type
stringDescriptionThe identifier used for the drop-down menu component.
alignRight- Type
boolDescriptionIf set to
true, items are aligned to the right edge of the menu. authLinksClassName- Type
stringDescriptionAdditional CSS class for the drop-down menu avatar authentication links.
autoFocus- Type
boolDescriptionIf set to
true, the first menu item gets focused after opening the drop-down menu. children- Type
nodeDescriptionThe component children, wrapped by the drop-down menu avatar component. This can include DropdownMenu components.
className- Type
stringDescriptionAdditional component styling class name which is passed to the component.
dropdownClassName- Type
stringDescriptionOptional CSS class for the drop-down menu.
dropUp- Type
boolDescriptionIf set to
true, the menu appears above the trigger component. headerClassName- Type
stringDescriptionAdditional CSS class for the drop-down menu avatar header.
icon- Type
string | IconDescriptionAn Icon component to render on the component. The value must be an
Iconcomponent or the icon's name. For example,CheckIconor'gw-check'. imageSource- Type
stringDescriptionThe path to a user image, preferentially shown before user initials or icon.
isOpen- Type
boolDescriptionIf set to
true, the menu is currently visible to the user. messageProps- Description
The message props to generate an error message or aria-label.
onBeforeLogout- Type
(() => void | Promise<void>) | undefinedDescriptionCallback to be called before Okta logout.
separatorClassName- Type
stringDescriptionOptional CSS class for the drop-down menu separator.
showImageBorder- Type
boolDescriptionIf set to
true, displays the image border. subtitle- TypeDescription
The menu header subtitle text.
title- TypeDescription
The menu header title text.
useAuthInfo- Type
boolDescriptionIf set to
true, displays header information from Okta (if available) and the logout menu link. username- Type
stringDescriptionThe user's first and last name, used as the component's alt text and to display initials if no image is selected.
Crochets
Aucun crochet n'est disponible pour drop-down menu avatar.
Clés de traduction
Le composant d'avatar du menu déroulant définit les clés de traduction suivantes :
| Clé | Utilisée pour |
|---|---|
| jutro-router.DropdownMenu.Logout | aria-label Valeur d’un bouton Déconnexion. |
| jutro-router.DropdownMenu.ProfileMenu | aria-label Valeur d'un bouton Profil. |
Portes de sortie
Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.
Exemples
Consultez la section Utilisation pour savoir comment configurer correctement avatar de menu déroulant et découvrir les différentes options de configuration disponibles.
Avatar du menu déroulant de base
Un avatar de menu déroulant est un type d’avatar qui fonctionne comme un bouton de menu déroulant. Lorsqu’un utilisateur clique sur l’avatar, un menu déroulant s’ouvre et est défini à l’aide des composants enfants de liste déroulante décrits sur la page du bouton du menu déroulant.
<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>
Avatar de menu déroulant avec une icône
La propriété icon vous permet d'utiliser n'importe quelle icône Jutro comme icône par défaut. Pour en savoir plus sur les icônes Jutro, reportez-vous à la page du composant Icône.
import { HelpIcon } from '@jutro/icons';
<DropdownMenuAvatar
id="iconExample"
icon={HelpIcon}>
...
</DropdownMenuAvatar>
Avatar de menu déroulant avec une image
Le composant d'avatar affichera n'importe quelle image arbitraire avec la propriété imageSource. L'image sera redimensionnée pour s'adapter au cercle. Dans l’exemple suivant, la source est une image carrée de 32 x 32 px qui est redimensionnée pour s’adapter au cercle par défaut.
<DropdownMenuAvatar
id="imageExample"
imageSource='/path/to/image'
>
...
</DropdownMenuAvatar>
Avatar de menu déroulant utilisant des informations d’authentification
Vous pouvez configurer le composant d'avatar pour qu'il affiche le contenu du client d'authentification à l'aide de la propriété useAuthInfo.
<DropdownMenuAvatar
id="authExample"
useAuthInfo
>
...
</DropdownMenuAvatar>
Avatar de menu déroulant avec nom d’utilisateur
La propriété username est utilisée comme texte alternatif. De plus, si aucune valeur imageSource n'est définie, les initiales de la chaîne de nom d'utilisateur seront affichées à la place d'une icône.
<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>