# 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) 组件文档以获取更多详细信息。