mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
139 lines
No EOL
4.1 KiB
Text
139 lines
No EOL
4.1 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 implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
|
|
|
|
|
## Default (single-line)
|
|
|
|
<CodeSnippet code="npm i 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 no-op function to the `copy` prop.
|
|
|
|
<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
|
|
|
|
## Inline
|
|
|
|
<CodeSnippet type="inline" code="rm -rf node_modules/" />
|
|
|
|
## Multi-line
|
|
|
|
<CodeSnippet type="multi" {code} />
|
|
|
|
## Expanded by default
|
|
|
|
Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
|
|
|
|
<CodeSnippet type="multi" {code} expanded />
|
|
|
|
## Reactive example
|
|
|
|
The multi-line code snippet also dispatches "expand" and "collapse" events.
|
|
|
|
<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
|
|
|
|
## 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
|
|
|
|
Set `hideCopyButton` to `true` to hide the copy button.
|
|
|
|
<CodeSnippet type="multi" {code} hideCopyButton />
|
|
|
|
## Hidden show more button
|
|
|
|
Only multi-line code snippets have a "Show more" button by default. Set `showMoreLess` to `false` to hide it.
|
|
|
|
<CodeSnippet type="multi" {code} showMoreLess={false} />
|
|
|
|
## Hidden copy, show more buttons
|
|
|
|
<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />
|
|
|
|
## Custom show more/less text
|
|
|
|
Use the `showMoreText` and `showLessText` props to override the default "Show more" and "Show less" button text.
|
|
|
|
<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />
|
|
|
|
## Disabled
|
|
|
|
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
|
|
|
<CodeSnippet disabled code="npm i 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 /> |