🎨 自訂

KryptoGO Kit 的主要元件是 「連接錢包」按鈕。

使用和自訂 ConnectButton

這是主要元件。它負責渲染連接/斷開連接按鈕，以及鏈交換的使用者介面。

import { ConnectButton } from '@kryptogo/kryptogokit';

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

注意：請確保您的應用程式已包裹在必要的提供者中。詳細資訊請閱讀有關包裹提供者的更多內容 here。

屬性

ConnectButton 元件提供了幾個屬性來自訂其外觀，包括切換不同元素的可見性。

屬性	類型	預設值
label	字串	連接錢包
accountStatus	列舉	full
chainStatus	列舉	{ smallScreen: "icon", largeScreen: "full" }
showBalance	列舉	{ smallScreen: false, largeScreen: true }

注意：內建的 largeScreen 斷點是 768px。

標籤

使用 label 屬性來設定自訂的 ConnectButton 文字。

<ConnectButton label='登入' />

帳戶狀態

以下是您可以使用 accountStatus 屬性的幾種不同方式。

僅顯示帳戶的頭像。

<ConnectButton accountStatus='avatar' />

僅顯示帳戶的位址。

<ConnectButton accountStatus='address' />

鏈狀態

以下是您可以使用 chainStatus 屬性的幾種不同方式。

僅顯示當前鏈的圖示。

<ConnectButton chainStatus='icon' />

僅顯示當前鏈的名稱。

<ConnectButton chainStatus='name' />

完全隱藏鏈的使用者介面。

<ConnectButton chainStatus='none' />

顯示餘額

使用 showBalance 屬性來隱藏/顯示餘額。

隱藏餘額。

<ConnectButton showBalance={false} />

響應式

這些屬性也可以以響應式格式定義。

在小螢幕上，僅顯示帳戶圖示。但在大螢幕上，顯示圖示和位址。

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

在小屏幕上，隱藏餘額。但在大屏幕上，顯示它。

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