按鈕 | ArcBlock

ConnectButton 元件提供了一個預設樣式且易於識別的按鈕，用於啟動 DID Connect 身份驗證過程。它簡化了為您的應用程式登入流程建立一致使用者體驗的過程。該按鈕採用 DID Connect 官方品牌設計，包括標誌和配色方案，為使用者提供了清晰的行動號召。

匯入

若要使用此按鈕，請從函式庫的 Button 模組中匯入。

import ConnectButton from '@arcblock/did-connect-react/lib/Button';

基本用法

最常見的使用案例是將 ConnectButton 與 useConnect hook 搭配使用。按鈕的 onClick 屬性可以直接對應到 hook 回傳的 open 函式，以觸發連線對話框。

Basic Usage

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function MyLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open} />
  );
}

預設情況下，按鈕會顯示文字「Continue With」，後面跟著 DID Connect 標誌。

自訂

您可以輕鬆自訂按鈕的外觀和行為。

自訂文字

若要變更預設文字，只需將您想要的內容作為 children 傳遞給元件即可。

Customizing Button Text

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function CustomLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open}>
      使用 DID 錢包登入
    </ConnectButton>
  );
}

額外屬性

ConnectButton 是 @arcblock/ux/lib/Button 元件（基於 Material-UI 的 Button）的封裝，並接受其所有標準屬性。這允許進行廣泛的自訂，例如禁用按鈕、使其全寬，或使用 sx 屬性應用自訂樣式。

Passing Additional Props

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function DisabledButtonComponent() {
  const { open } = useConnect();

  // 範例：在某個程序執行時禁用按鈕
  const isLoading = true;

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? '連線中...' : '使用 DID 錢包登入'}
    </ConnectButton>
  );
}

屬性

children React.ReactNode — 要顯示在按鈕內的內容。如果未提供，預設為 "Continue With"。
...rest ButtonProps — ConnectButton 接受任何其他對底層 Material-UI Button 元件有效的屬性。這包括 onClick、disabled、variant、color、fullWidth 和 sx 等常見屬性。

後續步驟

現在您已經知道如何新增 ConnectButton，下一步理所當然是了解為其功能提供支援的 hook。

useConnect Hook

了解如何使用 useConnect hook 以程式化方式開啟、關閉和管理 DidConnect UI 對話框。