BurgerMenu

BurgerMenu en Storybook

Note: Este componente debe utilizarse solo bajo el ámbito de los patrones de UX de composición y disposición de página y no se debe utilizar en situaciones aisladas o personalizadas.

Para obtener documentación sobre el componente menú de opciones para patrones de UX de encabezado, consulte esta página.

Uso

Descripción general

El menú de opciones es un componente de composición y disposición que proporciona un contenedor lateral que se puede contraer y que generalmente se utiliza para la navegación en pantallas más pequeñas. Se activa mediante un botón y revela un panel que contiene otros componentes.

Como parte del sistema de composición y disposición de página flexible de Jutro, la única tarea de este componente es la composición, disposición y el comportamiento del panel de menús (es decir, la apertura y el cierre). Es independiente del contenido, lo que significa que usted es responsable de completarlo con elementos de menú y enlaces, además de implementar cualquier enrutamiento asociado.

Cuándo se debe utilizar

Use el menú de opciones cuando necesite:

• Proporcionar una solución de navegación compacta para diseños responsive, especialmente para ventanas gráficas de tablets y dispositivos móviles.
• Alojar acciones secundarias o enlaces que no necesitan ser visibles de forma constante en la página.
• Crear una estructura de página personalizada con los nuevos componentes de composición y disposición de página que requieran un menú lateral alternable.

Formato

Anatomía

El componente menú de opciones consta de los siguientes elementos:

1. Botón desencadenador: Botón de ícono que alterna la visibilidad del panel de menú. El componente modifica la apariencia.
2. Panel de menú: Contenedor que aparece cuando se abre el menú. Puede colocar cualquier componente secundario dentro de este panel, como listas de navegación, campos de búsqueda o botones de acción.

Ubicación

El menú de opciones está diseñado para colocarse dentro de un panel de encabezado o en el nivel superior de una composición y disposición personalizada de página.

Comportamiento

• Interacción: Al seleccionar el botón desencadenador, se abre el panel de menú. El panel se puede cerrar seleccionando el botón de cierre predeterminado, haciendo clic en el área fuera del menú o usando un botón personalizado.
• Estado: La visibilidad del componente se controla mediante programación con las propiedades open y onOpenChange.

Prácticas recomendadas

Asegúrese de que no quede sobrecargado

El menú de opciones es un contenedor para otros componentes. Para garantizar una buena experiencia de usuario, rellénelo con contenido simple y enfocado. Evite sobrecargar el panel con demasiados elementos o estructuras muy anidadas.

Proporcione una salida evidente

Los usuarios siempre deben tener una forma obvia de cerrar el menú. El componente incluye un botón de cierre de forma predeterminada. Si usa la propiedad hideCloseButton, asegúrese de proporcionar un elemento personalizado que permita a los usuarios descartar el panel.

Use rótulos concisos

Si agrega enlaces de navegación u otros elementos interactivos dentro del menú de opciones, sus rótulos deben ser cortos, claros y predecibles. Use sustantivos para los vínculos a destinos (por ejemplo, “Panel”, “Configuración”) y verbos para las acciones (por ejemplo, “Agregar usuario”, “Exportar datos”).

Componentes relacionados

• HeaderPanel
• SidePanel
• SubheaderPanel
• ToolsSidePanel
• FooterPanel

Código

Demostración de ejemplo básico en Storybook .

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Instrucción de importación

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

childrenobligatorio

Tipo

React.ReactNode

Descripción

The children elements to render inside the component.

hideCloseButton

Tipo

boolean

Descripción

If set to true, the Close button is not rendered.

onOpenChange

Tipo

(open: boolean) => void

Descripción

Callback to run when the burger menu is opened or closed.

open

Tipo

boolean

Descripción

If set to true, the burger menu is currently open.

Ganchos

No hay ganchos para burger menu.

Claves de traducción

El componente menú de opciones define dos claves de traducción:

Clave	Se usa para
jutro-components.BurgerMenu.openButtonLabel	Describir el aspecto y la función del botón de apertura.
jutro-components.BurgerMenu.closeButtonLabel	Describir el aspecto y la función del botón de cierre.

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 menú de opciones correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de menú de opciones básico

Un menú básico de opciones es un encapsulador colocado alrededor de una serie de elementos secundarios. Esto renderizará un menú que se puede contraer al costado de la pantalla y al que un usuario puede acceder haciendo clic en él. También tendrá que usar el estado open y el gancho setOpen del estado de React para obtener el estado actual del menú y cambiarlo cuando se presione el botón para abrirlo.

Demostración de ejemplo básico en Storybook .

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Ejemplo de botón personalizado

Puede agregar un botón personalizado para contraer el menú de opciones como uno de sus elementos secundarios.

Demostración de ejemplo de botón personalizado en Storybook.

function BurgerMenuCustomButton() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

return ( 
  <BurgerMenu 
    hideCloseButton
    open={open}
    onOpenChange={onOpenChange}> 
    <Button 
      label="Click the button to close the navigation" 
      hideLabel 
      icon={KeyboardArrowLeftIcon} 
      variant="secondary" 
      onClick={() => onOpenChange(!open)} 
      /> 
      <h3>Menu</h3> 
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu> ); }

Registro de cambios

10.10.0

Se agregó el componente menú de opciones.