Logoコンポーネントは、アプリケーション内に公式のDID Connectロゴをシンプルかつ一貫して表示する方法を提供します。これはブランド表現のために設計された単純なビジュアルコンポーネントであり、ユーザーがおなじみの分散型ID接続方法を認識できるようにします。
使用方法
コンポーネントを使用するには、インポートしてJSXに含めるだけです。sizeプロップを使用してサイズを制御できます。
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モーダル内に配置します。 - 利用可能な認証方法を説明する情報ページや「About」ページに表示します。
次のステップ
Logoを追加した後、他のUIコンポーネントを調べてユーザーインターフェースを完成させてください：