mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
569d7021cb* docs: fix "no-op" typo * docs: add carbon-preprocess-svelte * docs: use lg size for outbound link to source code * docs: update copy * docs: default to white theme * docs(recursive-list): simplify copy * docs(recursive-list): simplify copy * docs: apply noGutter to installation code snippets
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={() => {}} /> |