CopyButton 复制按钮

用于将文本复制到剪贴板并带视觉反馈的按钮组件。

引入

import { CopyButton } from 'asterui'

示例

基本用法

带默认图标的简单复制按钮。启用工具提示以获得视觉反馈。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="Hello, World!" />
        <CopyButton text="Copy this text" showTooltip />
      </Space>
    )
}

export default App

带文本内容

显示文本内容而不是默认图标。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <CopyButton text="npm install asterui">
          npm install asterui
        </CopyButton>
        <CopyButton text="pnpm add asterui" copiedChildren="Copied!">
          pnpm add asterui
        </CopyButton>
      </Space>
    )
}

export default App

颜色

对按钮应用不同的颜色主题。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="primary" color="primary" showTooltip />
        <CopyButton text="secondary" color="secondary" showTooltip />
        <CopyButton text="accent" color="accent" showTooltip />
        <CopyButton text="success" color="success" showTooltip />
      </Space>
    )
}

export default App

变体

不同的按钮样式变体。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="solid" color="primary" />
        <CopyButton text="outline" color="primary" variant="outline" />
        <CopyButton text="ghost" variant="ghost" />
        <CopyButton text="soft" color="primary" variant="soft" />
      </Space>
    )
}

export default App

尺寸

可用的按钮尺寸。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space align="center">
        <CopyButton text="xs" size="xs" />
        <CopyButton text="sm" size="sm" />
        <CopyButton text="md" size="md" />
        <CopyButton text="lg" size="lg" />
        <CopyButton text="xl" size="xl" />
      </Space>
    )
}

export default App

形状

方形和圆形按钮形状。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="square" shape="square" />
        <CopyButton text="circle" shape="circle" />
      </Space>
    )
}

export default App

代码块

放置在自定义代码块角落的复制按钮。

import { CopyButton } from 'asterui'

export const App = () => (
  <CopyButton text="Hello!" showTooltip />
)

import { CopyButton } from 'asterui'

function App() {
  const codeText = `import { CopyButton } from 'asterui'
  
  export const App = () => (
    <CopyButton text="Hello!" showTooltip />
  )`
  
  return (
      <div style={{ position: 'relative' }} className="bg-base-300 rounded-lg p-4 pr-12">
        <pre className="font-mono text-sm whitespace-pre">{codeText}</pre>
        <div style={{ position: 'absolute', top: 8, right: 8 }}>
          <CopyButton text={codeText} size="sm" variant="ghost" showTooltip />
        </div>
      </div>
    )
}

export default App

带复制的输入框

从输入字段复制值。

import { CopyButton, Input } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('https://asterui.com')
  
  return (
      <div className="flex gap-2">
        <Input value={value} onChange={(e) => setValue(e.target.value)} />
        <CopyButton text={value} color="primary" showTooltip />
      </div>
    )
}

export default App

回调函数

处理复制成功和错误事件。

import { CopyButton } from 'asterui'

function App() {
  return (
      <CopyButton
        text="Callback example"
        color="primary"
        onCopy={() => console.log('Copied!')}
        onError={(err) => console.error('Failed:', err)}
      >
        Copy with callback
      </CopyButton>
    )
}

export default App

自定义超时

控制已复制状态显示的时长。

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="1 second" timeout={1000}>1s timeout</CopyButton>
        <CopyButton text="5 seconds" timeout={5000}>5s timeout</CopyButton>
      </Space>
    )
}

export default App

API

`CopyButton`

属性	描述	类型	默认值
`text`	要复制到剪贴板的文本	`string`	-
`timeout`	显示已复制状态的持续时间（毫秒）	`number`	`2000`
`color`	按钮颜色	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	按钮样式变体	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link'`	-
`size`	按钮大小	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`shape`	按钮形状	`'square' \| 'circle'`	-
`icon`	默认状态的自定义图标	`ReactNode`	复制图标
`copiedIcon`	已复制状态的自定义图标	`ReactNode`	勾选图标
`children`	默认状态的自定义内容（覆盖 icon）	`ReactNode`	-
`copiedChildren`	已复制状态的自定义内容	`ReactNode`	-
`onCopy`	复制成功时的回调函数	`() => void`	-
`onError`	复制失败时的回调函数	`(error: Error) => void`	-
`showTooltip`	显示带复制状态的工具提示	`boolean`	`false`
`tooltipText`	默认状态的工具提示文本	`string`	`'复制'`
`copiedTooltipText`	已复制状态的工具提示文本	`string`	`'已复制！'`
`disabled`	禁用按钮	`boolean`	`false`

无障碍

使用原生 button 元素以获得键盘支持
通过图标变化和可选工具提示提供视觉反馈
禁用状态会正确传达