mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
32 lines
No EOL
1.2 KiB
Text
32 lines
No EOL
1.2 KiB
Text
<script>
|
|
import { CopyButton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
|
|
|
|
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
|
|
|
|
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
|
|
|
## Default
|
|
|
|
<CopyButton text="Carbon svelte" />
|
|
|
|
## Custom feedback text
|
|
|
|
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
|
|
|
## Overriding copy functionality
|
|
|
|
To override the default copy behavior, pass a custom function to the `copy` prop.
|
|
|
|
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
|
|
|
|
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
|
|
|
|
## Preventing copy functionality
|
|
|
|
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
|
|
|
|
<CopyButton text="This text should not be copied" copy={() => {}} /> |