Skip to content

AddressDisplay 地址显示

显示区块链地址,支持复制


功能描述

格式化显示区块链地址,支持缩略显示和一键复制。


属性规范

属性类型必需默认值说明
addressstringY-完整地址
formatenumN'short'显示格式
copyablebooleanNtrue是否可复制
showQRbooleanNfalse是否显示二维码按钮
onCopy() => voidN-复制成功回调
onQRPress() => voidN-二维码按钮点击回调

format 格式

说明示例
short首尾缩略0x1234...5678
medium中等长度0x123456...345678
full完整显示0x1234567890abcdef...

显示规则

缩略算法

short:  前6位 + "..." + 后4位
medium: 前8位 + "..." + 后6位
full:   完整显示,必要时换行

样式要求

  • MUST 使用等宽字体
  • SHOULD 字母小写显示(统一风格)
  • MAY 支持 checksum 高亮(EVM 地址大小写混合)

行为规范

必须 (MUST)

  1. copyable=true 时,点击地址复制完整地址
  2. 复制成功后显示反馈(Toast 或图标变化)
  3. 使用等宽字体

建议 (SHOULD)

  1. 复制时提供触觉反馈
  2. 显示复制图标作为视觉提示
  3. 复制后图标短暂变为勾选状态

可选 (MAY)

  1. 长按显示完整地址
  2. 支持选择文本

布局规范

标准布局

┌─────────────────────────────────────┐
│ 0x1234...5678  [复制] [二维码]      │
└─────────────────────────────────────┘

行内布局

地址:0x1234...5678 📋

设计标注

部分规格
字体等宽字体
字号14px
图标尺寸16px
图标间距8px

复制反馈

图标状态

默认: 📋 (复制图标)
点击后: ✓ (勾选图标,持续 1.5s)
恢复: 📋

Toast 反馈

type: success
message: "地址已复制"
duration: 2000

Released under the MIT License.