跳到主要内容

UI 组件

@arcblock/did-connect-react 库包含一组预设样式、辅助性的 UI 组件，旨在帮助你以一致且美观的方式显示 DID 相关信息。这些组件与核心连接流程无缝协作，并基于强大的 @arcblock/ux 和 @mui/material 库构建，确保在你的应用程序中拥有一致的外观和感觉。

本节提供了这些组件的概述。点击任一卡片即可查看详细文档，包括属性和使用示例。

Avatar

一个旨在显示用户头像的组件，该头像根据用户的 DID 自动派生。

Address

用于以格式化且可选缩短的方式显示用户的 DID 地址，以提高可读性。

Button

一个预设样式的按钮，特别是 `ConnectButton`，用于以一致的设计启动 DID Connect 流程。

Logo

一个用于显示官方 DID Connect 徽标的简单组件，有助于品牌推广和 UI 一致性。

组合使用示例

这些组件旨在组合在一起以构建用户界面。以下是一个示例，说明如何使用 Avatar、Address 和 ConnectButton 创建一个简单的用户个人资料展示。

Combined UI Example

javascript
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import Address from '@arcblock/did-connect-react/lib/Address';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import { Box, Typography, Paper } from '@mui/material';

function UserDisplay({ userDid, userName }) {
  if (!userDid) {
    return <ConnectButton />;
  }

  return (
    <Paper elevation={2} sx={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={60} did={userDid} />
      <Box>
        <Typography variant="h6" component="div">{userName || 'Anonymous'}</Typography>
        <Address variant="body2" color="text.secondary">{userDid}</Address>
      </Box>
    </Paper>
  );
}

// 用法示例：
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />

此示例演示了如何使用提供的组件轻松构建适用于登录和登出状态的通用 UI 模式。

后续步骤

熟悉 UI 组件后，你可能希望探索该库的 Hooks 以便对身份验证流程和会话数据进行更多编程控制。