Logo | ArcBlock

Logo 組件提供了一種簡單且一致的方式，在您的應用程式中顯示官方的 DID Connect 標誌。它是一個專為品牌形象設計的直觀視覺組件，確保您的用戶能識別出這種熟悉的去中心化身份連接方式。

使用方式

若要使用此組件，只需匯入並將其包含在您的 JSX 中。您可以使用 size prop 控制其大小。

MyHeader.js

import React from 'react';
import Logo from '@arcblock/did-connect-react/lib/Logo';

export default function AppHeader() {
  return (
    <header style={{ display: 'flex', alignItems: 'center', padding: '16px', borderBottom: '1px solid #eee' }}>
      <Logo size={40} />
      <h1 style={{ marginLeft: '12px', fontSize: '24px' }}>My Application</h1>
    </header>
  );
}

屬性

Logo 組件是 SVG 元素的封裝，可接受以下屬性：

size number (default: 24) — 設定標誌的寬度和高度（以像素為單位）。
...rest any — 任何其他屬性都會直接傳遞給底層的 SVG 元素，允許使用 className 或 style 等屬性進行自訂。

何時使用

在您的應用程式的頁首或頁尾，用以顯示其由 DID Connect 提供支援。
在登入或連接畫面上，通常放置在 Button 附近或 DidConnect 彈出視窗內，以保持品牌一致性。
在描述可用身份驗證方法的資訊頁或「關於」頁面。

後續步驟

新增 Logo 後，您可以探索其他 UI 組件來完善您的使用者介面：

Button

使用預先設定樣式的按鈕組件來觸發 DID Connect 流程。

Avatar

在使用者成功登入後，顯示其個人資料圖片。

Address

以格式化且易於閱讀的方式顯示使用者的去中心化識別碼 (DID)。