Botón de menú desplegable

Botón de menú desplegable en Storybook

Uso

Próximamente.

Código

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Instrucción de importación

import {
  DropdownMenuHeader,
  DropdownMenuButton,
  DropdownMenuSeparator,
} from '@jutro/components';
import { DropdownMenuLink } from '@jutro/router';

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

string

Descripción

Unique identifier for the component.

alignRight

Tipo

boolean

Descripción

If set to true, the menu items are aligned to the right edge of the menu.

autoFocus

Tipo

boolean

Descripción

If set to true, the first menu item gets focused after opening the dropdown menu.

buttonText

Tipo

IntlMessageShape

Descripción

The text displayed on the button.

dropUp

Tipo

boolean

Descripción

If set to true, the menu appears above the trigger component.

fullWidth

Tipo

boolean

Descripción

If set to true, expands button container to parent's boundaries.

icon

Tipo

string | Icon

Descripción

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

isOpen

Tipo

boolean

Descripción

If set to true, the menu is currently opened.

menuClassName

Tipo

string

Descripción

Override the class for the inner menu of the dropdown menu.

toggleButtonClassName

Tipo

string

Descripción

Custom class name for the toggle button.

Propiedades secundarias del menú desplegable

Dropdown menu Los componentes utilizan DropdownMenuHeader, DropdownMenuLink y DropdownMenuSeparator como componentes secundarios. Las propiedades de estos componentes son las siguientes:

Propiedades de DropdownMenuHeader

children

Tipo

React.ReactNode

Descripción

The component children, wrapped by the dropdown menu header component.

id

Tipo

string

Descripción

Unique identifier for the component.

title

Tipo

React.ReactNode | IntlMessageShape

Descripción

The element node representing the header title, in most cases it will be a plain string.

Propiedades de DropdownMenuLink

activeClassName

Tipo

string

Descripción

The class to give the link when it is active.

children

Tipo

string

Descripción

The children elements to render inside of the DropdownMenuLink.

className

Tipo

string

Descripción

CSS class name for this component.

disabled

Tipo

boolean

Descripción

If set to true, this link is disabled.

focused

Tipo

string

Descripción

If set to true, the link is considered as the currently active one.

href

Tipo

IntlMessageShape

Descripción

Used to specify an external link.

icon

Tipo

string | Icon

Descripción

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

iconClassName

Tipo

string

Descripción

Additional class names for the icon.

iconPosition

Tipo

'left' | 'right'

Descripción

Where the icon is placed relative to the text.

id

Tipo

string

Descripción

Unique identifier for the component.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

rel

Tipo

string

Descripción

Specifies the relationship between the current and an external document, like the HTML rel attribute.

target

Tipo

string

Descripción

Specifies where to open the external link, like the HTML target attribute.

to

Tipo

IntlMessageShape | {pathname?, hash?}

hash

Tipo

IntlMessageShape

Descripción

Hash to put in the URL.

pathname

Tipo

IntlMessageShape

Descripción

Link path.

Descripción

Used to specify an internal link.

visible

Tipo

boolean

Descripción

If set to true, this link is visible.

Propiedades de DropdownMenuSeparator

className

Tipo

string

Descripción

CSS class name for this component.

id

Tipo

string

Descripción

Unique identifier for the component.

Ganchos

No hay ganchos para Menú desplegable.

Claves de traducción

No hay traducciones para Menú desplegable.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Uso del componente botón obsoleto

El componente botón del botón de menú desplegable utiliza el componente botón obsoleto de antes de la versión 10.0. En consecuencia, podría verse y comportarse de manera diferente a otros botones de la aplicación. Los detalles de este componente heredado se encuentran en Storybook.

Si desea mantener la uniformidad, le recomendamos crear una versión personalizada combinando el componente botón estable con un menú desplegable.

Ejemplos

El componente DropdownMenuButton renderiza un botón. Cuando el usuario hace clic en el botón, se renderiza un árbol de cualquiera de los siguientes:

• DropdownMenuLink
• DropdownMenuSeparator
• DropdownMenuHeader

Consulte la sección Uso para obtener detalles sobre cómo diseñar un botón de menú desplegable correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de menú desplegable básico

En el siguiente ejemplo, se muestra cómo crear un componente DropdownMenuButton simple.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Ejemplo de encabezados y separador

Puede usar encabezados y separadores para crear una separación entre grupos de opciones.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink>Separated menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuHeader title="Header text">
    <DropdownMenuLink>First header menu item</DropdownMenuLink>
    <DropdownMenuLink>Second header menu item</DropdownMenuLink>
  </DropdownMenuHeader>
</DropdownMenuButton>

Ejemplo de menú desplegable hacia arriba

Puede usar la propiedad dropUp para renderizar el menú sobre el botón cuando se hace clic en él.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  dropUp={true}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Registro de cambios

10.10.1

Se agregaron tokens de diseño adicionales para este componente.

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente DropdownMenuButton. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.

Tipo de propiedad icon extendida

El tipo de la propiedad icon se ha extendido a string | React.ComponentType.

Elementos obsoletos

El paso de un string como valor a la propiedad icon ha quedado obsoleto.