连接按钮

使用和定制连接按钮

这是主要组件。负责呈现连接/断开按钮以及链切换UI。

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

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

注意：请确保您的应用程序包含在必要的提供程序中。阅读更多。

ConnectButton组件提供了几个属性，用于自定义其外观，包括切换不同元素的可见性。

Prop	Type	Default
`label`	`string`	`连接钱包`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

注意：内置的largeScreen断点为768px。

以下是使用accountStatus属性的几种不同方式。

仅显示账户的头像。

<ConnectButton accountStatus="avatar" />

仅显示账户的地址。

<ConnectButton accountStatus="address" />

以下是使用chainStatus属性的几种不同方式。

仅显示当前链的图标。

<ConnectButton chainStatus="icon" />

仅显示当前链的名称。

<ConnectButton chainStatus="name" />

完全隐藏链UI。

<ConnectButton chainStatus="none" />

使用showBalance属性隐藏/显示余额。

隐藏余额。

<ConnectButton showBalance={false} />

这些属性也可以以响应式格式定义。

在小屏幕上，仅显示账户图标。但在大屏幕上，显示图标和地址。

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

在小屏幕上隐藏余额，但在大屏幕上显示余额。

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