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

Dropdown

<Dropdown> sont des superpositions commutables pour afficher une liste d'options.

Le composant <Dropdown> peut rendre les éléments de deux manières : sous la forme d'un éventail d'éléments <DropdownItem> ou sous la forme d'un rappel de rendu (fonction en tant qu'enfants).

La recommandation est d'utiliser le rappel de rendu lorsqu'un grand nombre d'éléments est fourni, car la liste déroulante virtualisera alors tous les éléments et les performances seront considérablement améliorées.

Si vous souhaitez utiliser <Dropdown> pour peindre un champ de sélection comme vous le feriez dans un formulaire, utilisez plutôt <Select>.

Le composant prend également en charge les listes imbriquées, consultez la documentation DropdownItem pour en savoir plus.

Usage

import { Dropdown } from 'nr1'

Exemples

Basique

<Dropdown title="Dropdown">
  <DropdownItem>Item 1</DropdownItem>
  <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
  <DropdownItem>Item 3</DropdownItem>
  <DropdownItem>Item 4</DropdownItem>
</Dropdown>

Avec étiquette et informations

<Dropdown title="Dropdown" label="Items" info="Info value">
  <DropdownItem>Item 1</DropdownItem>
  <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
  <DropdownItem>Item 3</DropdownItem>
  <DropdownItem>Item 4</DropdownItem>
</Dropdown>

Avec étiquette en ligne

<Dropdown title="Dropdown" label="Items" labelInline>
  <DropdownItem>Item 1</DropdownItem>
  <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
  <DropdownItem>Item 3</DropdownItem>
  <DropdownItem>Item 4</DropdownItem>
</Dropdown>

Avec description

<Dropdown title="Dropdown" description="Description value">
  <DropdownItem>Item 1</DropdownItem>
  <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
  <DropdownItem>Item 3</DropdownItem>
  <DropdownItem>Item 4</DropdownItem>
</Dropdown>

Avec un message invalide

<Dropdown title="Dropdown" invalid="Invalid message value">
  <DropdownItem>Item 1</DropdownItem>
  <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
  <DropdownItem>Item 3</DropdownItem>
  <DropdownItem>Item 4</DropdownItem>
</Dropdown>

Avec des sous-éléments

function render() {
  const items = new Array(10).fill().map((_, i) => i + 1);




  return (
    <Dropdown title="Dropdown">
      <DropdownItem>Item 1</DropdownItem>
      <DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
      <DropdownItem items={items}>
        Item 3
        {({ item, index }) => (
          <DropdownItem key={index} onClick={(evt) => console.log(evt)}>
            Item 3.{item}
          </DropdownItem>
        )}
      </DropdownItem>
      <DropdownItem>Item 4</DropdownItem>
    </Dropdown>
  );
}

Sections

<Dropdown title="Dropdown" sectioned>
  <DropdownSection title="Section 1">
    <DropdownItem>Item 1.1</DropdownItem>
    <DropdownItem>Item 1.2</DropdownItem>
  </DropdownSection>




  <DropdownSection title="Section 2">
    <DropdownItem>Item 2.1</DropdownItem>
    <DropdownItem>Item 2.2</DropdownItem>
  </DropdownSection>
</Dropdown>

Liste virtualisée

function render() {
  const items = new Array(10000).fill().map((_, i) => `Item ${i}`);




  return (
    <Dropdown title="Dropdown" items={items}>
      {({ item, index }) => (
        <DropdownItem key={index} onClick={() => alert(item)}>
          {item}
        </DropdownItem>
      )}
    </Dropdown>
  );
}

Liste des sections et éléments virtualisés

function render() {
  const sections = new Array(30).fill().map((_, s) => ({
    title: `Section ${s}`,
    items: new Array(1000).fill().map((_, i) => `Item ${s}.${i}`),
  }));




  return (
    <Dropdown title="Dropdown" items={sections} sectioned>
      {({ item: section, index }) => (
        <DropdownSection
          key={index}
          title={section.title}
          items={section.items}
        >
          {({ item, index }) => <DropdownItem>{item}</DropdownItem>}
        </DropdownSection>
      )}
    </Dropdown>
  );
}

Accessoire de recherche et rappel onSearch

class SearchDropdown extends React.Component {
  constructor() {
    super(...arguments);




    this.state = {
      search: '',
      items: [
        { id: '1ed6', name: 'Melton Garcia' },
        { id: 'f5a3', name: 'Finley Mendez' },
        { id: '93bc', name: 'Coleen Salinas' },
        { id: '7123', name: 'John Doe' },
        { id: 'b62f', name: 'Ana Santos' },
        { id: '8db4', name: 'Jane Smith' },
        { id: '4c77', name: 'Colin Payne' },
      ],
    };
  }




  render() {
    const { search, items } = this.state;




    const filteredItems = items.filter(({ name }) =>
      name.toLowerCase().includes(search.toLowerCase()),
    );




    return (
      <Dropdown
        title="Dropdown"
        items={filteredItems}
        search={search}
        onSearch={(evt) => this.setState({ search: evt.target.value })}
      >
        {({ item }) => <DropdownItem key={item.id}>{item.name}</DropdownItem>}
      </Dropdown>
    );
  }
}

Accessoires

ariaLabel

chaîne

Fournissez une étiquette descriptive pour ce contrôle, par exemple "Comptes".

children

OBLIGATOIRE
Nœud|fonction

Ce composant peut être rendu soit de manière déclarative, en passant directement un ensemble d'enfants, soit de manière virtualisée, en passant un rappel de rendu (fonctionne comme enfants). Les enfants peuvent être de deux types : <DropdownItem>, pour générer des éléments ; ou <DropdownSection>, lorsque la liste déroulante est sectionnée. Chaque section peut, à son tour, contenir <DropdownItem>. La recommandation est d'utiliser le rappel de rendu lorsqu'un grand nombre d'éléments est fourni, car la liste des éléments sera virtualisée par le composant, augmentant ainsi les performances. Lors de l'utilisation du rappel de rendu, les éléments doivent être fournis via la propriété items. Ensuite, le rappel sera appelé pour chaque élément présent dans l'éventail, et le résultat attendu est un <DropdownItem> ou un <DropdownSection> selon la prop sectioned.

className

chaîne

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

description

chaîne

Message avec des instructions sur la façon de remplir le champ du formulaire.

disabled

booléen

Si true, la liste déroulante n'est pas disponible pour l'interaction.

iconType

énum.

Icône à afficher.

<One of

Dropdown.ICON_TYPE.DATAVIZDATAVIZAREA_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZBAR_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZBILLBOARD_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZBULLET_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZCHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZCHARTA_ADD, Dropdown.ICON_TYPE.DATAVIZDATAVIZCHARTA_EDIT, Dropdown.ICON_TYPE.DATAVIZDATAVIZCHARTA_REMOVE, Dropdown.ICON_TYPE.DATAVIZDATAVIZDASHBOARD, Dropdown.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_ADD, Dropdown.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_EDIT, Dropdown.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_FILTER, Dropdown.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_REMOVE, Dropdown.ICON_TYPE.DATAVIZDATAVIZEVENT_FEED_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZHEATMAP_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZLINE_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZMARKDOWN, Dropdown.ICON_TYPE.DATAVIZDATAVIZPIE_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZSCATTER_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZSERVICE_MAP_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZSTACKED_BAR_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZSTACKED_HORIZONTAL_BAR_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZTABLE_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZTRAFFIC_LIGHTS_CHART, Dropdown.ICON_TYPE.DATAVIZDATAVIZVERTICAL_BAR_CHART, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATE, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATEA_ADD, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATEA_REMOVE, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIME, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIMEA_ADD, Dropdown.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIMEA_REMOVE, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSATTACHMENT, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSDOCUMENTATION, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSEMAIL, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSEMAILV_ALTERNATE, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFILE, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFILEA_ADD, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFILEA_REMOVE, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDER, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDERA_ADD, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDERA_REMOVE, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSNOTES, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_ADD, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_EDIT, Dropdown.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_REMOVE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREANOMALIES, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERA_INSPECT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECPU, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOP, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMEMORY, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILEA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKA_INSPECT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_ADD, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_CONFIGURE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_EDIT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_INSPECT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_PAUSE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_REMOVE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESTORAGE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_CLUSTER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_CONTAINER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_DEPLOYMENT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_MASTER_NODE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_NAMESPACE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_NODE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_POD, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_SERVICE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREALL_ENTITIES, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATION, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECLOUD, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECODE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECONTAINER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECONTROL_CENTER, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECORRELATION, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECORRELATION_REASONING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASEA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDECISIONS, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDESTINATIONS, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDOWNSTREAM_CONNECTION, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDOWNSTREAM_DEPLOYMENT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREEVENT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREFEED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARELIVE_VIEW, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARELOGS, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATION, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMONITORING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARENODE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREOVERVIEW, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPATHWAY, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGIN, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREQUERY, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICEA_CHECKED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_DISABLED, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_ERROR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_OK, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_WARNING, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESOURCES, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESTACK_TRACE, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYNTHESIZED_ENTITY, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYNTHETICS_MONITOR, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYSTEM, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARETRACES, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARETRAFFIC, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREUPSTREAM_CONNECTION, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREUPSTREAM_DEPLOYMENT, Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREWORKLOADS, Dropdown.ICON_TYPE.INTERFACEARROWARROW_BOTTOM, Dropdown.ICON_TYPE.INTERFACEARROWARROW_BOTTOMV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEARROWARROW_BOTTOMV_ALTERNATEWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_BOTTOM_LEFT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_BOTTOM_RIGHT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_TOP_LEFT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_TOP_RIGHT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_HORIZONTAL, Dropdown.ICON_TYPE.INTERFACEARROWARROW_LEFT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_LEFTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEARROWARROW_LEFTV_ALTERNATEWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEARROWARROW_RIGHT, Dropdown.ICON_TYPE.INTERFACEARROWARROW_RIGHTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEARROWARROW_RIGHTV_ALTERNATEWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEARROWARROW_TOP, Dropdown.ICON_TYPE.INTERFACEARROWARROW_TOPV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEARROWARROW_TOPV_ALTERNATEWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEARROWARROW_VERTICAL, Dropdown.ICON_TYPE.INTERFACEARROWEXPAND, Dropdown.ICON_TYPE.INTERFACEARROWGO_TO, Dropdown.ICON_TYPE.INTERFACEARROWMOVE, Dropdown.ICON_TYPE.INTERFACEARROWRESIZE, Dropdown.ICON_TYPE.INTERFACEARROWRETURN_LEFT, Dropdown.ICON_TYPE.INTERFACEARROWRETURN_RIGHT, Dropdown.ICON_TYPE.INTERFACEARROWSHRINK, Dropdown.ICON_TYPE.INTERFACEARROWSORT, Dropdown.ICON_TYPE.INTERFACECARETCARET_BOTTOM, Dropdown.ICON_TYPE.INTERFACECARETCARET_BOTTOMSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_BOTTOMV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECARETCARET_BOTTOMWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECARETCARET_BOTTOMWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_LEFT, Dropdown.ICON_TYPE.INTERFACECARETCARET_LEFTSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_LEFTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECARETCARET_LEFTWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECARETCARET_LEFTWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_RIGHT, Dropdown.ICON_TYPE.INTERFACECARETCARET_RIGHTSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_RIGHTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECARETCARET_RIGHTWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECARETCARET_RIGHTWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_TOP, Dropdown.ICON_TYPE.INTERFACECARETCARET_TOPSIZE_8, Dropdown.ICON_TYPE.INTERFACECARETCARET_TOPV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECARETCARET_TOPWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECARETCARET_TOPWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOM, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFT, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHT, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOP, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPSIZE_8, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPWEIGHT_BOLDSIZE_8, Dropdown.ICON_TYPE.INTERFACEINFOANNOUNCEMENT, Dropdown.ICON_TYPE.INTERFACEINFOHELP, Dropdown.ICON_TYPE.INTERFACEINFOINFO, Dropdown.ICON_TYPE.INTERFACEINFOINFOWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEOPERATIONSADJUST, Dropdown.ICON_TYPE.INTERFACEOPERATIONSALERT, Dropdown.ICON_TYPE.INTERFACEOPERATIONSALERTA_REMOVE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSALERTS_OFF, Dropdown.ICON_TYPE.INTERFACEOPERATIONSALERTS_ON, Dropdown.ICON_TYPE.INTERFACEOPERATIONSARCHIVE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCENTER, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCLOSE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCLOSESIZE_8, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCLOSEV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCONFIGURE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCOPY_TO, Dropdown.ICON_TYPE.INTERFACEOPERATIONSCOPY_TO_CLIPBOARD, Dropdown.ICON_TYPE.INTERFACEOPERATIONSDOWNLOAD, Dropdown.ICON_TYPE.INTERFACEOPERATIONSDRAG, Dropdown.ICON_TYPE.INTERFACEOPERATIONSEDIT, Dropdown.ICON_TYPE.INTERFACEOPERATIONSEXPORT, Dropdown.ICON_TYPE.INTERFACEOPERATIONSEXTERNAL_LINK, Dropdown.ICON_TYPE.INTERFACEOPERATIONSFILTER, Dropdown.ICON_TYPE.INTERFACEOPERATIONSFILTERA_ADD, Dropdown.ICON_TYPE.INTERFACEOPERATIONSFILTERA_REMOVE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSFILTERV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSFOLLOW, Dropdown.ICON_TYPE.INTERFACEOPERATIONSGROUP, Dropdown.ICON_TYPE.INTERFACEOPERATIONSGROUPA_REMOVE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSGROUPV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSHIDE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSHIDE_OTHERS, Dropdown.ICON_TYPE.INTERFACEOPERATIONSHIGHLIGHT, Dropdown.ICON_TYPE.INTERFACEOPERATIONSIMPORT, Dropdown.ICON_TYPE.INTERFACEOPERATIONSMORE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSPAUSE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSPAUSE_ALTERNATEV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSPIN, Dropdown.ICON_TYPE.INTERFACEOPERATIONSPLAY, Dropdown.ICON_TYPE.INTERFACEOPERATIONSPLAY_ALTERNATEV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSREARRANGE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSREDO, Dropdown.ICON_TYPE.INTERFACEOPERATIONSREFRESH, Dropdown.ICON_TYPE.INTERFACEOPERATIONSREMOVEV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSREPLYA_REPLY, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSEARCH, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSEARCHV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSELECTION, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSELECTIONV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSHARE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSHARE_LINK, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSHOW, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSKIP_BACK, Dropdown.ICON_TYPE.INTERFACEOPERATIONSSKIP_FORWARD, Dropdown.ICON_TYPE.INTERFACEOPERATIONSTAG, Dropdown.ICON_TYPE.INTERFACEOPERATIONSTRASH, Dropdown.ICON_TYPE.INTERFACEOPERATIONSTV_MODE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSTV_MODEA_TV_MODE, Dropdown.ICON_TYPE.INTERFACEOPERATIONSUNDO, Dropdown.ICON_TYPE.INTERFACEOPERATIONSUNPIN, Dropdown.ICON_TYPE.INTERFACEOPERATIONSUPLOAD, Dropdown.ICON_TYPE.INTERFACEPLACEHOLDERSCUSTOM_PLACEHOLDER, Dropdown.ICON_TYPE.INTERFACEPLACEHOLDERSICON_PLACEHOLDER, Dropdown.ICON_TYPE.INTERFACESIGNASTERISK, Dropdown.ICON_TYPE.INTERFACESIGNCHECKMARK, Dropdown.ICON_TYPE.INTERFACESIGNCHECKMARKV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACESIGNCHECKMARKV_ALTERNATEWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACESIGNCLOSE, Dropdown.ICON_TYPE.INTERFACESIGNDOLLAR_SIGN, Dropdown.ICON_TYPE.INTERFACESIGNEXCLAMATION, Dropdown.ICON_TYPE.INTERFACESIGNEXCLAMATIONV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACESIGNMINUS, Dropdown.ICON_TYPE.INTERFACESIGNMINUSV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACESIGNNUMBER, Dropdown.ICON_TYPE.INTERFACESIGNPLUS, Dropdown.ICON_TYPE.INTERFACESIGNPLUSV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACESIGNTIMES, Dropdown.ICON_TYPE.INTERFACESIGNTIMESSIZE_8, Dropdown.ICON_TYPE.INTERFACESIGNTIMESV_ALTERNATE, Dropdown.ICON_TYPE.INTERFACESTATECLOSED, Dropdown.ICON_TYPE.INTERFACESTATECRITICAL, Dropdown.ICON_TYPE.INTERFACESTATECRITICALWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACESTATEDISABLED, Dropdown.ICON_TYPE.INTERFACESTATEENABLED, Dropdown.ICON_TYPE.INTERFACESTATEHEALTHY, Dropdown.ICON_TYPE.INTERFACESTATELOADING, Dropdown.ICON_TYPE.INTERFACESTATELOCK, Dropdown.ICON_TYPE.INTERFACESTATEOPEN, Dropdown.ICON_TYPE.INTERFACESTATEPRIVATE, Dropdown.ICON_TYPE.INTERFACESTATEPUBLIC, Dropdown.ICON_TYPE.INTERFACESTATEUNAVAILABLE, Dropdown.ICON_TYPE.INTERFACESTATEUNLOCK, Dropdown.ICON_TYPE.INTERFACESTATEWARNING, Dropdown.ICON_TYPE.INTERFACESTATEWARNINGWEIGHT_BOLD, Dropdown.ICON_TYPE.INTERFACEVIEWENTER_FULL_SCREEN, Dropdown.ICON_TYPE.INTERFACEVIEWEXIT_FULL_SCREEN, Dropdown.ICON_TYPE.INTERFACEVIEWGRID_VIEW, Dropdown.ICON_TYPE.INTERFACEVIEWHIGH_DENSITY_VIEW, Dropdown.ICON_TYPE.INTERFACEVIEWLAYER_LIST, Dropdown.ICON_TYPE.INTERFACEVIEWLIST_VIEW, Dropdown.ICON_TYPE.INTERFACEVIEWSIXTH_SENSE, Dropdown.ICON_TYPE.INTERFACEVIEWTHEME_TOGGLE, Dropdown.ICON_TYPE.INTERFACEVIEWTHEME_TOGGLES_DARK, Dropdown.ICON_TYPE.INTERFACEVIEWTHEME_TOGGLES_LIGHT, Dropdown.ICON_TYPE.LOCATIONLOCATIONHOME, Dropdown.ICON_TYPE.LOCATIONLOCATIONMAP, Dropdown.ICON_TYPE.LOCATIONLOCATIONPIN, Dropdown.ICON_TYPE.LOCATIONLOCATIONWORLD, Dropdown.ICON_TYPE.PROFILESEVENTSCOMMENT, Dropdown.ICON_TYPE.PROFILESEVENTSCOMMENTA_EDIT, Dropdown.ICON_TYPE.PROFILESEVENTSFAVORITE, Dropdown.ICON_TYPE.PROFILESEVENTSFAVORITEWEIGHT_BOLD, Dropdown.ICON_TYPE.PROFILESEVENTSLIKE, Dropdown.ICON_TYPE.PROFILESUSERSORGANIZATION, Dropdown.ICON_TYPE.PROFILESUSERSORGANIZATIONA_ADD, Dropdown.ICON_TYPE.PROFILESUSERSORGANIZATIONA_EDIT, Dropdown.ICON_TYPE.PROFILESUSERSORGANIZATIONA_REMOVE, Dropdown.ICON_TYPE.PROFILESUSERSTEAM, Dropdown.ICON_TYPE.PROFILESUSERSTEAMA_ADD, Dropdown.ICON_TYPE.PROFILESUSERSTEAMA_EDIT, Dropdown.ICON_TYPE.PROFILESUSERSTEAMA_REMOVE, Dropdown.ICON_TYPE.PROFILESUSERSUSER, Dropdown.ICON_TYPE.PROFILESUSERSUSERA_ADD, Dropdown.ICON_TYPE.PROFILESUSERSUSERA_EDIT, Dropdown.ICON_TYPE.PROFILESUSERSUSER__A_REMOVE,

>

info

chaîne

Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette.

invalid

booléen|chaîne

Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ boolean ou un string. Lorsqu'il s'agit d'un string, ainsi que de l'état invalide affiché, le texte sera affiché ci-dessous.

items

éventail

Éléments à restituer, sous la forme d'une liste d'objets. Habituellement, chaque élément de l'éventail d'éléments contient les données requises pour générer le <DropdownItem> correspondant (ou <DropdownSection> dans le cas où la liste déroulante est sectionnée). Cet accessoire est requis lors du rendu des éléments avec le rappel de rendu (fonction comme enfants).

const items = ['Item 1', 'Item 2', 'Item 3'];


const dropdown = (
  <Dropdown title="Dropdown" items={items}>
    {({ item, index }) => (
      <DropdownItem key={index} onClick={() => console.log(item)}>
        {item}
      </DropdownItem>
    )}
  </Dropdown>
);

label

chaîne

Texte à afficher comme étiquette.

labelInline

booléen

Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un Form. Dans ce cas, définissez layoutType sur Form.LAYOUT_TYPE.SPLIT dans le composant Form.

loading

booléen

Pour indiquer si une action est en cours, notamment dans le cas où elle prend plus d'une seconde à se terminer, vous devez afficher l'état de chargement.

onClose

fonction

Le rappel est déclenché à chaque fois que la liste déroulante est fermée.function (

event: React.MouseEvent
)

onLoadMore

fonction

Rappel déclenché lorsque davantage d'éléments doivent être chargés. Cela se produit lorsque vous chargez les éléments de manière paresseuse et que les éléments sur le point d'être rendus ne peuvent pas être trouvés dans l'éventail items Ce rappel doit être utilisé pour récupérer/charger les éléments manquants à partir du backend ou d'autres sources. La promesse renvoyée doit être résolue une fois le chargement des données de l'élément terminé. Il sera utilisé pour déterminer quand actualiser la liste avec les données nouvellement chargées. Ce rappel peut être appelé plusieurs fois en réaction à un seul événement de défilement.

function (
cursor: Cursor

Items to load.

)

Éléments de chargement paresseux

import { Dropdown, DropdownItem } from 'nr1';


// This example assumes you have a way to know/load this information.
const remoteTotalNumberOfItems = 9000;
const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
  { id: 4, text: 'Item 4' },
];


function fetchMore({ startIndex, stopIndex }) {
  return fetch(
    `path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`
  ).then((response) => {
    // Store items in item list...
  });
}


const dropdown = (
  <Dropdown
    items={items}
    onLoadMore={fetchMore}
    rowCount={remoteTotalNumberOfItems}
    title="Dropdown"
  >
    {({ item, index }) => <DropdownItem key={index}>{item.text}</DropdownItem>}
  </Dropdown>
);

Intégration avec les composants de requête

import { EntitiesByDomainTypeQuery, Dropdown, DropdownItem } from 'nr1';


const renderDropdown = (queryResult) => {
  const { fetchMore, loading, data } = queryResult;
  const { results, count } = data.actor.entitySearch;


  return (
    <Dropdown
      items={results.entities}
      onLoadMore={fetchMore}
      rowCount={count}
      title="Dropdown"
    >
      {({ item, index }) => (
        <DropdownItem key={index}>{item.text}</DropdownItem>
      )}
    </Dropdown>
  );
};


const style = { width: 200, height: 300 };
const dropdown = (
  <EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
    {renderDropdown}
  </EntitiesByDomainTypeQuery>
);

onOpen

fonction

Le rappel est déclenché à chaque fois que la liste déroulante est ouverte.

function (
event: React.MouseEvent
)

onSearch

fonction

Le rappel est déclenché à chaque fois que l'entrée de recherche de la liste déroulante change. Ce rappel nécessite que l'accessoire search soit défini.

function (
event: React.ChangeEvent
)

onToggle

fonction

Le rappel est déclenché à chaque fois que la liste déroulante est basculée.

function (
event: React.MouseEvent,
opened: boolean
)

placementType

énum.

Spécifie le placement de la liste déroulante par rapport au déclencheur de la liste déroulante. L'affichage par défaut se situe en bas de l'écran, mais vous pouvez également choisir de l'afficher à partir de l'extrémité inférieure.

<One of

Dropdown.PLACEMENT_TYPE.BOTTOM_END, Dropdown.PLACEMENT_TYPE.BOTTOM_START

>

required

booléen

Si true, indique que le champ de formulaire est obligatoire.

rowCount

nombre

Nombre de lignes. Par défaut, il est égal à la longueur de l'éventail passé dans la propriété items. Vous devez spécifier rowCount lorsque vous connaissez le nombre total d'éléments mais que vous souhaitez les charger paresseusement pendant le défilement.

search

chaîne

Valeur de l'entrée de recherche. L'entrée de recherche ne sera affichée que si la valeur est définie.

sectioned

booléen

Détermine si la liste déroulante est sectionnée. Une liste déroulante sectionnée compose ses options regroupées par sections (réalisées avec <DropdownSection>), où chaque section est délimitée par un titre optionnel en haut, et un séparateur horizontal en bas.

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of
<One of

Dropdown.SPACING_TYPE.EXTRA_LARGE, Dropdown.SPACING_TYPE.LARGE, Dropdown.SPACING_TYPE.MEDIUM, Dropdown.SPACING_TYPE.NONE, Dropdown.SPACING_TYPE.OMIT, Dropdown.SPACING_TYPE.SMALL,

>
>

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.

title

chaîne

Le texte à afficher dans le bouton liste déroulante. Lorsqu'elle n'est pas présente, une icône doit être transmise à la place.

type

énum.

Le type peut être :

  • Principal — utilisé pour attirer l’attention sur une action spécifique que vous souhaitez que l’utilisateur effectue comme prochaine étape.
  • Normal (utilisé comme secondaire) — à utiliser lorsque plusieurs actions doivent être affichées.
  • Simple — à utiliser lorsque plusieurs actions doivent être disponibles et sont moins importantes à réaliser pour l'utilisateur.
  • Destructeur — à utiliser lorsque vous avez une action destructrice comme supprimer ou retirer, que vous souhaitez que l'utilisateur interrompe et considère avant de terminer. <One of
    Dropdown.TYPE.DESTRUCTIVE, Dropdown.TYPE.NORMAL, Dropdown.TYPE.PLAIN, Dropdown.TYPE.PLAIN_NEUTRAL, Dropdown.TYPE.PRIMARY,
    >

Définitions de types

DropdownRendererArguments

{
item: string,

Item to render

index: number,

Index of the item in the items array

items: string[],

Array of items which we're iterating on

}

Cursor

{
startIndex: number,

First index of the range of items to load.

stopIndex: number,

Last index of the range of items to load.

}
Droits d'auteur © 2025 New Relic Inc.
RecrutementConditions de servicePolitique DMCAAvis de confidentialitéCookiesLoi britannique sur l'esclavage

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