# Address

`Address` 元件是一個專門的 UI 元素，旨在以清晰、可讀且使用者友善的格式顯示去中心化識別碼 (DID) 位址。它透過提供縮短和輕鬆複製的選項，智慧地處理 DID 常見的長字串，從而提升整體使用者體驗。

此元件是從 `@arcblock/ux/lib/Address` 簡單地重新匯出，提供在 DID Connect 生態系統內顯示位址的一致方式。

## 如何匯入

若要使用 `Address` 元件，請從其在函式庫中的特定模組路徑匯入。

```javascript Import icon=logos:javascript
import Address from '@arcblock/did-connect-react/lib/Address';
```

## 基本用法

只需將 DID 字串作為子項傳遞給元件，即可渲染完整的位址。

```jsx Basic Address Display icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserProfile() {
  const userDid = 'z1Zg2a5Vw2fA2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t';

  return (
    <div>
      <h4>User DID:</h4>
      <Address>{userDid}</Address>
    </div>
  );
}
```

## 功能

`Address` 元件包含多個實用功能以提升可用性。

### 縮短

長 DID 可能會使 UI 變得混亂。使用 `shorten` 屬性可顯示位址的截斷版本，僅顯示開頭和結尾的字元。這對於列表或緊湊的個人資料視圖至關重要。

### 複製到剪貼簿

透過新增 `copyable` 屬性，元件將在位址旁渲染一個複製圖示。點擊此圖示會將完整的 DID 複製到使用者的剪貼簿，提供方便的一鍵操作。

## 屬性

`Address` 元件接受以下屬性：

<x-field-group>
  <x-field data-name="children" data-type="string" data-required="true">
    <x-field-desc markdown>您想顯示的 DID 位址字串。</x-field-desc>
  </x-field>
  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>若為 `true`，位址將被縮短為更緊湊的格式 (例如，`z1Zg2a...s0t`)。</x-field-desc>
  </x-field>
  <x-field data-name="copyable" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>若為 `true`，將顯示一個複製圖示，讓使用者可以一鍵將完整的位址複製到剪貼簿。</x-field-desc>
  </x-field>
  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
    <x-field-desc markdown>當為 `true` 時，元件將根據可用寬度自動縮短位址，確保它能適應其容器而不會破壞佈局。</x-field-desc>
  </x-field>
</x-field-group>

## 範例

以下是 `Address` 元件的一些常見用例。

### 縮短且可複製的位址

這是最常見的配置，提供適合大多數 UI 的緊湊且功能性的顯示。

```jsx Shortened and Copyable icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserCard({ did }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>DID:</span>
      <Address shorten copyable>
        {did}
      </Address>
    </div>
  );
}
```

### 與 Avatar 一起使用

`Address` 元件可與 `Avatar` 元件完美搭配，以建構使用者個人資料元素。

```jsx Profile Header icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

function ProfileHeader() {
  const { session } = useSession();

  if (!session.user) {
    return <p>Please log in.</p>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <Avatar did={session.user.did} />
      <div>
        <strong>{session.user.name}</strong>
        <Address shorten copyable>
          {session.user.did}
        </Address>
      </div>
    </div>
  );
}
```

現在您已經知道如何顯示使用者位址，您可能會想學習如何顯示他們的個人資料圖片。請查閱 [Avatar](./ui-components-avatar.md) 元件文件以獲取更多詳細資訊。