• /
  • EnglishEspañolFrançais日本語한국어Português
  • Se connecterDémarrer

Cette traduction automatique est fournie pour votre commodité.

En cas d'incohérence entre la version anglaise et la version traduite, la version anglaise prévaudra. Veuillez visiter cette page pour plus d'informations.

Créer un problème

DropdownItem

Élément enfant du composant <Dropdown> .

Prend en charge l'événement de clic via la propriété onClick et la possibilité de rediriger vers d'autres pages via la propriété to .

Prend en charge les sous-éléments via la propriété items et en passant une fonction de rendu à la propriété children .

Usage

import { DropdownItem } from 'nr1'

Accessoires

children

OBLIGATOIRE
nœud | (nœud|fonction)[]

Contenu à afficher à l'intérieur de l'élément. Il accepte également une méthode de rendu comme dernier enfant lors du rendu de listes imbriquées. Il faut passer un éventail à la prop items .

import { Dropdown, DropdownItem } from 'nr1';
const nestedItems = [
{ id: '3.1', text: 'Item 3.1' },
{ id: '3.2', text: 'Item 3.2' },
{ id: '3.3', text: 'Item 3.3' },
{ id: '3.4', text: 'Item 3.4' },
];
const nestedDropdown = (
<Dropdown title="Nested Dropdown">
<DropdownItem>Item 1</DropdownItem>
<DropdownItem>Item 2</DropdownItem>
<DropdownItem items={nestedItems}>
Item 3
{({ item }) => <DropdownItem key={item.id}>{item.text}</DropdownItem>}
</DropdownItem>
<DropdownItem>Item 4</DropdownItem>
</Dropdown>
);

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

disabled

booléen

Si true, l'élément n'est pas disponible pour l'interaction et son rappel onClick ne se déclenchera pas.

items

éventail

Les éléments restituent une sous-liste de l'élément actuel. Cet accessoire nécessite également de passer une fonction en tant que dernier children après le contenu de l'élément pour fonctionner.

onClick

fonction

Rappel déclenché à chaque fois que l'utilisateur clique sur l'élément.

function (
event: React.MouseEvent
)

selected

booléen

Affiche l'option comme sélectionnée.

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien.

forme

pathname

OBLIGATOIRE
chaîne

search

chaîne

hash

chaîne

Droits d'auteur © 2025 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.