mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
921c3e121a* chore(deps): remove clipboard-copy * feat: add copy prop, use navigator.clipboard API * docs: add clipboard-copy back to docsite for more browser support * docs(component-api): use outbound link * docs: add override/prevent copy examples
109 lines
No EOL
3.2 KiB
Text
109 lines
No EOL
3.2 KiB
Text
<script>
|
|
import { CodeSnippet } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
|
|
let code = `// helpers.js
|
|
|
|
export function multiply(a: number, b: number) {
|
|
return a * b;
|
|
}
|
|
|
|
export function divide(a: number, b: number) {
|
|
return a / b;
|
|
}
|
|
|
|
export function add(a: number, b: number) {
|
|
return a + b;
|
|
}
|
|
|
|
export function subtract(a: number, b: number) {
|
|
return a - b;
|
|
}`;
|
|
|
|
let comment = `
|
|
> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
|
|
|
|
> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
|
|
`
|
|
</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 copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
|
|
|
|
|
### Default (single-line)
|
|
|
|
<CodeSnippet code="yarn add -D carbon-components-svelte" />
|
|
|
|
### 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/CodeSnippet/CodeSnippetOverride" />
|
|
|
|
### Preventing copy functionality
|
|
|
|
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
|
|
|
|
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
|
|
|
|
### Inline
|
|
|
|
<CodeSnippet type="inline" code="rm -rf node_modules/" />
|
|
|
|
### Multi-line
|
|
|
|
<CodeSnippet type="multi" {code} />
|
|
|
|
### Custom copy feedback text
|
|
|
|
Use the `feedback` prop to override the default copy button feedback text.
|
|
|
|
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
|
|
|
### Hidden copy button
|
|
|
|
<CodeSnippet type="multi" {code} hideCopyButton />
|
|
|
|
### Disabled
|
|
|
|
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
|
|
|
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
|
|
<br />
|
|
<CodeSnippet disabled type="multi" code="{comment}" />
|
|
|
|
### Wrapped text
|
|
|
|
`wrapText` only applies to the `"multi"` type.
|
|
|
|
<CodeSnippet wrapText type="multi" code="{comment}" />
|
|
|
|
### Dynamic multi-line code
|
|
|
|
For dynamically updated code, you must use the `code` prop instead of the default slot.
|
|
|
|
<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
|
|
|
|
### Hidden multi-line code
|
|
|
|
There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
|
|
|
|
The recommended workaround is to re-render the component. See the example below.
|
|
|
|
<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
|
|
|
|
### Skeleton
|
|
|
|
The default skeleton type is `"single"`.
|
|
|
|
<CodeSnippet skeleton />
|
|
|
|
### Skeleton (multi-line)
|
|
|
|
<CodeSnippet type="multi" skeleton /> |