連接按鈕
連接按鈕
使用以及自訂 連接按鈕
這是主要的元件。它負責渲染連接/斷開按鈕，以及鏈交換的 UI。
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};
注意：確保您的應用程式包含必要的提供者包裹。閱讀更多。
ConnectButton 元件提供多個屬性，以自訂其外觀，包括切換不同元素的可見性。
| Prop | Type | Default |
|---|
label | string | Connect Wallet |
accountStatus | enum | full |
chainStatus | enum | { smallScreen: "icon", largeScreen: "full" } |
showBalance | enum | { smallScreen: false, largeScreen: true } |
注意：內建的 largeScreen 斷點是 768px。
使用 label 屬性設置自訂的 ConnectButton 文本。
<ConnectButton label="Sign in" />
以下是幾種使用 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,
}}
/>
