网站导航

组件

复制

提供无障碍复制操作,并如实报告结果。

数值与精简反馈

Value feedback repeats what was copied; compact feedback suits a specimen that already shows it.

使用于 Palette.

用法与接口

DemoCopyButton 会渲染 span.ui-copy,其中包含 ui-button 和 ui-copy-status 实时通知区域。label 为辅助技术提供操作名称;feedback="compact" 报告“Copied”,而非复制的值。在 DemoCopyGroup 中,按钮共用同一状态区域,且不再生成外层元素。

<DemoCopyButton value="var(--color-blue-60)" label="Copy the blue 60 variable">Copy variable</DemoCopyButton>
<span class="ui-copy">  <button type="button" class="ui-button" data-size="sm" aria-label="Copy the blue 60 variable">…Copy variable</button>  <span class="ui-copy-status" role="status" data-result="success">Copied var(--color-blue-60)</span></span>

data-result 为 success 或 error,文字始终说明实际发生的结果。