UI 元件 | ArcBlock

@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 建立簡單使用者個人資料顯示的範例。

組合 UI 範例

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>
  );
}

// Example usage:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />

此範例展示了如何使用提供的元件輕鬆建構登入和登出狀態的常見 UI 模式。

後續步驟

熟悉 UI 元件後，您可能想探索該函式庫的 Hooks，以對身份驗證流程和會話資料進行更多程式化控制。