mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(code-snippet): add examples for dynnamic, hidden code snippets

Browse source
This commit is contained in:
Eric Liu 2020-10-30 10:22:39 -07:00
commit 5e13f04e3c
3 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/components/CodeSnippet.svx
View file

@ -51,6 +51,20 @@ let comment = `
<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 visually hidden. The logic to render the "Show more" button relies on the element's computed height. For visually hidden content, the button will not appear because the 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"`.