mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
62 lines
No EOL
1.5 KiB
Text
62 lines
No EOL
1.5 KiB
Text
<script>
|
|
import { CodeSnippet, InlineNotification } 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 lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
|
|
|
|
### 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 />
|
|
|
|
### Wrapped text
|
|
|
|
`wrapText` only applies to the `"multi"` type.
|
|
|
|
<CodeSnippet wrapText type="multi" code="{comment}" />
|
|
|
|
### Skeleton
|
|
|
|
The default skeleton type is `"single"`.
|
|
|
|
<CodeSnippet skeleton />
|
|
|
|
### Skeleton (multi-line)
|
|
|
|
<CodeSnippet type="multi" skeleton /> |