剪贴板

import { Clipboard, IconButton } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Clipboard.Root value="https://chakra-ui.com.cn">
      <Clipboard.Trigger asChild>
        <IconButton variant="surface" size="xs">
          <Clipboard.Indicator />
        </IconButton>
      </Clipboard.Trigger>
    </Clipboard.Root>
  )
}

import { Button, Clipboard } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Clipboard.Root value="https://chakra-ui.com.cn">
      <Clipboard.Trigger asChild>
        <Button variant="surface" size="sm">
          <Clipboard.Indicator />
          <Clipboard.CopyText />
        </Button>
      </Clipboard.Trigger>
    </Clipboard.Root>
  )
}

import { Clipboard, IconButton, Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Clipboard.Root maxW="300px" value="https://chakra-ui.com.cn">
      <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>
  )
}

import { Button, Clipboard } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Clipboard.Root value="https://chakra-ui.com.cn" timeout={1000}>
      <Clipboard.Trigger asChild>
        <Button variant="surface" size="sm">
          <Clipboard.Indicator />
          <Clipboard.CopyText />
        </Button>
      </Clipboard.Trigger>
    </Clipboard.Root>
  )
}

import { Clipboard, Link } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Clipboard.Root value="https://chakra-ui.com.cn">
      <Clipboard.Trigger asChild>
        <Link as="span" color="blue.fg" textStyle="sm">
          <Clipboard.Indicator />
          <Clipboard.ValueText />
        </Link>
      </Clipboard.Trigger>
    </Clipboard.Root>
  )
}

"use client"

import { Button, useClipboard } from "@chakra-ui/react"

const Demo = () => {
  const clipboard = useClipboard({ value: "https://chakra-ui.com.cn" })
  return (
    <Button variant="surface" size="sm" onClick={clipboard.copy}>
      {clipboard.copied ? "Copied" : "Copy"}
    </Button>
  )
}