组件 · 表单 · 原生 HTML 与 React
正文里可复制的字 InlineCopy
句子里的一段可复制的字(命令、ID):点一下复制,冒出「已复制」。
演示
命令 ,一点就复制。
命令 ,一点就复制。
<p class="xxd-text">命令 <button class="xxd-inline-copy" data-copy="pnpm xxd ls" data-copy-done="已复制命令">pnpm xxd ls<i data-xxd-icon="Copy" data-size="12"></i></button>,一点就复制。</p>export function InlineCopyDemo() {
return (
<p>
命令 <InlineCopyText labels={{ copyAction: "复制命令", copied: "已复制命令" }}>pnpm xxd ls</InlineCopyText>,一点就复制。
</p>
);
}
type Quality = { value: string; label: string };
const qualities = { pic: [{ value: "high", label: "高" }, { value: "standard", label: "标准" }], other: [{ value: "auto", label: "跟随会员计划" }] };属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-inline-copy |
键盘与读屏
- 本身是 <button>,读屏会读出里面的文字;需要时用 data-copy-done 换成更具体的提示
- 复制结果通过 live region 读出
规则
- hover / 聚焦时才出复制图标;触屏常显