Avatar de menú desplegable
Uso
Se están creando las pautas de uso para este componente y estarán disponibles en una versión futura.
Código
<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>
Instrucción de importación
import { DropdownMenuAvatar } from '@jutro/components';
Contrato de componentes
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Propiedades
idobligatorio- Tipo
stringDescripciónThe identifier used for the drop-down menu component.
alignRight- Tipo
boolDescripciónIf set to
true, items are aligned to the right edge of the menu. authLinksClassName- Tipo
stringDescripciónAdditional CSS class for the drop-down menu avatar authentication links.
autoFocus- Tipo
boolDescripciónIf set to
true, the first menu item gets focused after opening the drop-down menu. children- Tipo
nodeDescripciónThe component children, wrapped by the drop-down menu avatar component. This can include DropdownMenu components.
className- Tipo
stringDescripciónAdditional component styling class name which is passed to the component.
dropdownClassName- Tipo
stringDescripciónOptional CSS class for the drop-down menu.
dropUp- Tipo
boolDescripciónIf set to
true, the menu appears above the trigger component. headerClassName- Tipo
stringDescripciónAdditional CSS class for the drop-down menu avatar header.
icon- Tipo
string | IconDescripciónAn Icon component to render on the component. The value must be an
Iconcomponent or the icon's name. For example,CheckIconor'gw-check'. imageSource- Tipo
stringDescripciónThe path to a user image, preferentially shown before user initials or icon.
isOpen- Tipo
boolDescripciónIf set to
true, the menu is currently visible to the user. messageProps- Descripción
The message props to generate an error message or aria-label.
onBeforeLogout- Tipo
(() => void | Promise<void>) | undefinedDescripciónCallback to be called before Okta logout.
separatorClassName- Tipo
stringDescripciónOptional CSS class for the drop-down menu separator.
showImageBorder- Tipo
boolDescripciónIf set to
true, displays the image border. subtitle- TipoDescripción
The menu header subtitle text.
title- TipoDescripción
The menu header title text.
useAuthInfo- Tipo
boolDescripciónIf set to
true, displays header information from Okta (if available) and the logout menu link. username- Tipo
stringDescripciónThe user's first and last name, used as the component's alt text and to display initials if no image is selected.
Ganchos
No hay ganchos para Avatar de menú desplegable.
Claves de traducción
El componente Avatar de menú desplegable define las siguientes claves de traducción:
| Clave | Se usa para |
|---|---|
| jutro-router.DropdownMenu.Logout | Valor de aria-label para un botón de cierre de sesión. |
| jutro-router.DropdownMenu.ProfileMenu | Valor de aria-label para un botón de perfil. |
Escotillas de escape
Para obtener más información, consulte nuestra documentación sobre escotillas de escape.
Ejemplos
Consulte la sección Uso para obtener detalles sobre cómo diseñar un avatar de menú desplegable correctamente y las diferentes opciones de configuración con las que contamos.
Avatar de menú desplegable básico
Un avatar de menú desplegable es un tipo de avatar que funciona como un botón de menú desplegable. Cuando un usuario hace clic en el avatar, se abrirá un menú desplegable que se define mediante los componentes secundarios desplegables documentados en la página de botón de menú desplegable.
<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 menú desplegable con un ícono
La propiedad icon le permite utilizar cualquier ícono de Jutro como predeterminado. Para obtener más información acerca de los íconos de Jutro, consulte la página del componente ícono.
import { HelpIcon } from '@jutro/icons';
<DropdownMenuAvatar
id="iconExample"
icon={HelpIcon}>
...
</DropdownMenuAvatar>
Avatar de menú desplegable con una imagen
El componente avatar muestra cualquier imagen arbitraria con la propiedad imageSource. La imagen cambia de tamaño para caber dentro del círculo. En el siguiente ejemplo, la imagen fuente es cuadrada, de 32 x 32 pixeles, y cambia de tamaño para ajustarse al círculo predeterminado.
<DropdownMenuAvatar
id="imageExample"
imageSource='/path/to/image'
>
...
</DropdownMenuAvatar>
Avatar de menú desplegable que usa información de autenticación
Puede configurar el componente avatar para que muestre el contenido del cliente de autenticación mediante la propiedad useAuthInfo.
<DropdownMenuAvatar
id="authExample"
useAuthInfo
>
...
</DropdownMenuAvatar>
Avatar de menú desplegable con nombre de usuario
La propiedad username se usa como texto alternativo. Además, si no se establece imageSource, se muestran las iniciales del string de nombre de usuario, en lugar de un ícono.
<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>