BoutonConnecter

BoutonConnecter

Utiliser et personnaliser le BoutonConnecter

Ceci est le composant principal. Il est responsable de l'affichage du bouton de connexion/déconnexion, ainsi que de l'interface utilisateur pour le changement de chaîne.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

Note : Assurez-vous que votre application est enveloppée dans les fournisseurs nécessaires. En savoir plus.

Le composant BoutonConnecter expose plusieurs props pour personnaliser son apparence, y compris la possibilité de modifier la visibilité de différents éléments.

Note : le point de rupture intégré grandÉcran est de 768px.

Utilisez la prop label pour définir un texte personnalisé pour BoutonConnecter.

<ConnectButton label="Sign in" />

Voici quelques différentes manières d'utiliser la prop accountStatus.

Afficher uniquement l'avatar du compte.

<ConnectButton accountStatus="avatar" />

Afficher uniquement l'adresse du compte.

<ConnectButton accountStatus="address" />

Voici quelques différentes manières d'utiliser la prop chainStatus.

Afficher uniquement l'icône de la chaîne actuelle.

<ConnectButton chainStatus="icon" />

Afficher uniquement le nom de la chaîne actuelle.

<ConnectButton chainStatus="name" />

Masquer complètement l'interface utilisateur de la chaîne.

<ConnectButton chainStatus="none" />

Utilisez la prop showBalance pour masquer/afficher le solde.

Masquer le solde.

<ConnectButton showBalance={false} />

Ces props peuvent également être définies dans un format réactif.

Sur les petits écrans, n'afficher que l'icône du compte. Mais sur les grands écrans, afficher l'icône et l'adresse.

<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>

Sur les petits écrans, masquer le solde. Mais sur les grands écrans, l'afficher.

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>