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

AccountPicker

Récupère tous les comptes et permet la sélection de comptes via la liste déroulante et la recherche. Pour capturer le compte actuellement sélectionné, vous pouvez utiliser l'écouteur onChange.

Notez que la plateforme contient déjà son propre sélecteur de compte, qui se trouve dans l'en-tête de celle-ci. Celui-ci peut être configuré pour être affiché à l'aide de l'API nerdlet.setConfig (en passant { accountPicker: true }), et sa valeur peut être lue à l'aide de <PlatformStateContext.Consumer>. Pour une référence complète, veuillez consulter ces API.

Usage

import { AccountPicker } from 'nr1'

Exemples

Basique

class Example extends React.Component {
constructor() {
super(...arguments);
this.state = { accountId: null };
this.onChangeAccount = this.onChangeAccount.bind(this);
}
onChangeAccount(_, value) {
alert(`Selected account: ${value}`);
this.setState({ accountId: value });
}
render() {
return (
<AccountPicker
value={this.state.accountId}
onChange={this.onChangeAccount}
/>
);
}
}

Avec étiquette en ligne

class Example extends React.Component {
constructor() {
super(...arguments);
this.state = { accountId: null };
this.onChangeAccount = this.onChangeAccount.bind(this);
}
onChangeAccount(_, value) {
alert(`Selected account: ${value}`);
this.setState({ accountId: value });
}
render() {
return (
<AccountPicker
label="Account"
labelInline
value={this.state.accountId}
onChange={this.onChangeAccount}
/>
);
}
}

Accessoires

ariaLabel

chaîne

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

className

chaîne

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

crossAccount

booléen

Affiche une option en haut nommée « Tous les comptes ». Lorsqu'elle est sélectionnée, la valeur fournie par le rappel onChange est AccountPicker.CROSS_ACCOUNT. Ceci est utile lorsque vous disposez de fonctionnalités pouvant fonctionner sur plusieurs comptes.

disabled

booléen

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

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.

onChange

fonction

Rappel déclenché à chaque fois que l'utilisateur clique sur un compte de la liste.

function (
event: React.MouseEvent,
value: number

Id of the account selected.

)

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

AccountPicker.SPACING_TYPE.EXTRA_LARGE, AccountPicker.SPACING_TYPE.LARGE, AccountPicker.SPACING_TYPE.MEDIUM, AccountPicker.SPACING_TYPE.NONE, AccountPicker.SPACING_TYPE.OMIT, AccountPicker.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.

value

nombre|énumération

Identifiant du compte sélectionné.

Droits d'auteur © 2025 New Relic Inc.

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