Bouton de menu déroulant

Bouton de menu déroulant dans Storybook

Utilisation

Disponible bientôt.

Code

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

Instruction d'importation

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

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

string

Description

Unique identifier for the component.

alignRight

Type

boolean

Description

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

autoFocus

Type

boolean

Description

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

buttonText

Type

IntlMessageShape

Description

The text displayed on the button.

dropUp

Type

boolean

Description

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

fullWidth

Type

boolean

Description

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

icon

Type

string | Icon

Description

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

Type

boolean

Description

If set to true, the menu is currently opened.

menuClassName

Type

string

Description

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

toggleButtonClassName

Type

string

Description

Custom class name for the toggle button.

Propriétés enfants du menu déroulant

Dropdown menu sont des composants qui utilisent DropdownMenuHeader, DropdownMenuLink et DropdownMenuSeparator comme composants enfants. Les propriétés de ces composants sont les suivantes :

Propriétés DropdownMenuHeader

children

Type

React.ReactNode

Description

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

id

Type

string

Description

Unique identifier for the component.

title

Type

React.ReactNode | IntlMessageShape

Description

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

Propriétés DropdownMenuLink

activeClassName

Type

string

Description

The class to give the link when it is active.

children

Type

string

Description

The children elements to render inside of the DropdownMenuLink.

className

Type

string

Description

CSS class name for this component.

disabled

Type

boolean

Description

If set to true, this link is disabled.

focused

Type

string

Description

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

href

Type

IntlMessageShape

Description

Used to specify an external link.

icon

Type

string | Icon

Description

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

Type

string

Description

Additional class names for the icon.

iconPosition

Type

'left' | 'right'

Description

Where the icon is placed relative to the text.

id

Type

string

Description

Unique identifier for the component.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

rel

Type

string

Description

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

target

Type

string

Description

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

to

Type

IntlMessageShape | {pathname?, hash?}

hash

Type

IntlMessageShape

Description

Hash to put in the URL.

pathname

Type

IntlMessageShape

Description

Link path.

Description

Used to specify an internal link.

visible

Type

boolean

Description

If set to true, this link is visible.

Propriétés DropdownMenuSeparator

className

Type

string

Description

CSS class name for this component.

id

Type

string

Description

Unique identifier for the component.

Crochets

Aucun crochet n'est disponible pour Dropdown menu.

Clés de traduction

Il n'existe aucune traduction pour Dropdown menu.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Utilisation d’un composant bouton obsolète

Le composant Bouton du bouton du menu déroulant utilise le composant Bouton obsolète datant d’avant la version 10.0. Par conséquent, il peut avoir une apparence et un comportement différents des autres boutons de votre application. Des détails sur ce composant existant sont disponibles dans Storybook.

Si vous souhaitez appliquer une cohérence, nous vous recommandons de créer une version personnalisée en combinant le composant bouton stable avec un menu déroulant

Exemples

Le composant DropdownMenuButton affiche un bouton. Lorsque l'utilisateur clique sur ce bouton, il affiche une arborescence des éléments suivants :

• DropdownMenuLink
• DropdownMenuSeparator
• DropdownMenuHeader

Consultez la section Utilisation pour découvrir comment concevoir correctement un menu déroulant et connaître les différentes options de configuration que nous proposons.

Exemple de menu déroulant de base

L'exemple suivant illustre la création d'un composant 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>

Exemple d'en-têtes et de séparateurs

Vous pouvez utiliser des en-têtes et des séparateurs pour séparer des groupes d'options.

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

Exemple de menu déroulant vers le haut

Vous pouvez utiliser la propriété dropUp pour afficher le menu au-dessus du bouton lorsque l'utilisateur clique dessus.

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

Journal des modifications

10.10.1

Des jetons de conception supplémentaires ont été ajoutés pour ce composant.

10.9.0

• Une nouvelle fonctionnalité d'opt-in a été introduite pour désactiver la publication automatique des événements pour le composant DropdownMenuButton. Vous pouvez activer cette fonctionnalité en ajoutant JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque cette option est activée, les composants hérités ne publient plus d'événements par défaut. Pour en savoir plus sur les événements et sur la façon d'en créer de nouveaux, reportez-vous à la documentation relative aux événements.

Type de propriété icon étendu

Le type de la propriété icon a été étendu à string | React.ComponentType.

Obsolescences

Le transfert de string en tant que valeur à la propriété icon est désormais obsolète.