mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 03:49:34 +00:00
fa9b90cd79* feat(code-snippet): add copy functionality - docs: add custom feedback copy text example * feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 * build(rollup): add clipboard-copy to globals * feat(copy-button): add copy functionality * feat(content-switcher): deprecate the light prop - docs: remove the light variant example * fix(toolbar-search): remove outer div * feat(search): add searchClass prop * fix(composed-modal): set hasScrollingContent class on ModalBody * docs(data-table): add expandable size examples * feat(tooltip): add TooltipFooter component * fix(time-picker): correctly display invalidText * feat(breadcrumb): support overflow menu * feat(multi-select): export inputRef prop * chore(deps-dev): upgrade carbon-components to v10.32.0 * feat(form): add noMargin prop to FormGroup * docs(tooltip): document TooltipFooter * feat(context-menu): support danger kind for ContextMenuOption * feat(data-table): support rendering empty table header in skeleton * refactor(types): use shorter import path in DataTableSkeleton * feat(data-table): allow sorting to be disabled for a specific header * docs(data-table): update example to desort the Protocol header As an example, it makes more sense because all the values ("http") are the same. * fix(context-menu): set initial y offset of context menu based on window height #577 * fix(context-menu): render submenu based on viewport constraints #577
92 lines
No EOL
2.5 KiB
Text
92 lines
No EOL
2.5 KiB
Text
<script>
|
|
import { CodeSnippet, InlineNotification, Link } 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>
|
|
|
|
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
|
|
</InlineNotification>
|
|
|
|
### Default (single-line)
|
|
|
|
<CodeSnippet code="yarn add -D carbon-components-svelte" />
|
|
|
|
### 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 /> |