mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
f2a3f8d2e1* chore(deps-dev): bump devDependencies * docs: update number of available carbon icons * feat(notification): distinguish dispatched close event between click/timeout * fix(notification): prevent class from being overriden by $$restProps * docs(notification): improve example body copy * fix(notification): remove notificationType prop * refactor(notification): resolve svelte file in imports * fix(notification): prevent class from being overridden by $$restProps * feat(notification): update TS signature for dispatched close event * docs: update contributing * fix(loading): adjust spinner styles * feat(tag): support custom icon variant * feat(tile): add optional expand/collapse icon labels to ExpandableTile * feat(code-snippet): support disabled state for single and multi-line types * fix(code-snippet): remove impossible class directive * fix(code-snippet): showMoreLess button size should be "field", not "small" * fix(password-input): disable visibility button - set default values for tooltipAlignment, tooltipPosition * fix(text-input): add missing warning field wrapper class * feat(button): infer hasIconOnly using $$slots API - requires Svelte version >=3.25 * docs(button): add danger tertiary, icon-only example * feat(button): set default values for tooltip alignment, position * docs: document dynamic theming * fix(modal): correctly set class props #482 * fix(form): forward submit event in FluidForm #487 * feat(dropdown): support warning state * feat(multi-select): support warning state * fix(multi-select): prevent dropdown from opening if disabled * feat(number-input): support warning state * chore(deps-dev): upgrade devDependencies * docs: bump @carbon/themes, carbon-components * refactor(data-table): co-locate DataTableSkeleton with DataTable * docs: update number of pictograms * fix(password-input): add missing "bx--btn" class to visibility toggle * docs: increase z-index for component preview
86 lines
No EOL
2.5 KiB
Text
86 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">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
|
|
</InlineNotification>
|
|
|
|
### Default (single-line)
|
|
|
|
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
|
|
|
|
### Inline
|
|
|
|
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
|
|
|
|
### Multi-line
|
|
|
|
<CodeSnippet type="multi" {code} />
|
|
|
|
### Hidden copy button
|
|
|
|
<CodeSnippet type="multi" {code} hideCopyButton />
|
|
|
|
### Disabled
|
|
|
|
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
|
|
|
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
|
|
<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 /> |