import { Clipboard, IconButton } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<IconButton variant="surface" size="xs">
<Clipboard.Indicator />
</IconButton>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
用法
¥Usage
import { Clipboard } from "@chakra-ui/react"<Clipboard.Root>
<Clipboard.Trigger>
<Clipboard.CopyText />
<Clipboard.Indicator />
</Clipboard.Trigger>
<Clipboard.Input />
</Clipboard.Root>示例
¥Examples
按钮
¥Button
使用 Clipboard.Trigger 组件创建复制按钮。
¥Use the Clipboard.Trigger component to create a copy button.
import { Button, Clipboard } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<Button variant="surface" size="sm">
<Clipboard.Indicator />
<Clipboard.CopyText />
</Button>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
输入框
¥Input
使用 Clipboard.Input 组件创建复制输入框。
¥Use the Clipboard.Input component to create a copy input.
import { Clipboard, IconButton, Input, InputGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root maxW="300px" value="https://chakra-ui.com">
<Clipboard.Label textStyle="label">Document Link</Clipboard.Label>
<InputGroup endElement={<ClipboardIconButton />}>
<Clipboard.Input asChild>
<Input />
</Clipboard.Input>
</InputGroup>
</Clipboard.Root>
)
}
const ClipboardIconButton = () => {
return (
<Clipboard.Trigger asChild>
<IconButton variant="surface" size="xs" me="-2">
<Clipboard.Indicator />
</IconButton>
</Clipboard.Trigger>
)
}
超时
¥Timeout
使用 timeout 属性更改复制消息的持续时间。
¥Use the timeout prop to change the duration of the copy message.
import { Button, Clipboard } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com" timeout={1000}>
<Clipboard.Trigger asChild>
<Button variant="surface" size="sm">
<Clipboard.Indicator />
<Clipboard.CopyText />
</Button>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
链接外观
¥Link Appearance
以下是组合 Clipboard.Trigger 和 Clipboard.ValueText 组件以创建链接外观的示例。
¥Here's an example that combines the Clipboard.Trigger and
Clipboard.ValueText components to create a link appearance.
import { Clipboard, Link } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<Link as="span" color="blue.fg" textStyle="sm">
<Clipboard.Indicator />
<Clipboard.ValueText />
</Link>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
商店
¥Store
或者，你可以使用 useClipboard 钩子创建自定义组件。
¥Alternatively, you can use the useClipboard hook to create a custom component.
"use client"
import { Button, useClipboard } from "@chakra-ui/react"
const Demo = () => {
const clipboard = useClipboard({ value: "https://chakra-ui.com" })
return (
<Button variant="surface" size="sm" onClick={clipboard.copy}>
{clipboard.copied ? "Copied" : "Copy"}
</Button>
)
}
属性
¥Props
根元素
¥Root
| Prop | Default | Type |
|---|---|---|
timeout | '3000' | numberThe timeout for the copy operation |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | stringThe initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; input: string; label: string }>The ids of the elements in the clipboard. Useful for composition. | |
onStatusChange | (details: CopyStatusDetails) => voidThe function to be called when the value is copied to the clipboard | |
onValueChange | (details: ValueChangeDetails) => voidThe function to be called when the value changes | |
value | stringThe controlled value of the clipboard |