按钮 | ArcBlock

ConnectButton 组件提供了一个预设样式且易于识别的按钮，用于启动 DID Connect 身份验证过程。它简化了为你的应用程序登录流程创建一致用户体验的过程。该按钮采用官方 DID Connect 品牌风格，包括徽标和配色方案，为用户提供了清晰的操作指引。

导入

要使用该按钮，请从库的 Button 模块中导入它。

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

基本用法

最常见的用例是将 ConnectButton 与 useConnect 钩子配对使用。按钮的 onClick 属性可以直接映射到钩子返回的 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 徽标。

自定义

你可以轻松自定义按钮的外观和行为。

自定义文本

要更改默认文本，只需将你想要的内容作为子元素传递给组件即可。

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}>
      Login with DID Wallet
    </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();

  // Example: disable the button while a process is running
  const isLoading = true;

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
    </ConnectButton>
  );
}

属性

children React.ReactNode — 要在按钮内部显示的内容。如果未提供，则默认为 "Continue With"。
...rest ButtonProps — ConnectButton 接受任何对底层 Material-UI Button 组件有效的其他属性。这包括 onClick、disabled、variant、color、fullWidth 和 sx 等常见属性。

下一步

既然你已经知道如何添加 ConnectButton，下一个合乎逻辑的步骤是了解为其功能提供支持的钩子。

useConnect 钩子

学习如何使用 useConnect 钩子以编程方式打开、关闭和管理 DidConnect UI 模态框。