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): simplify hidden code snippet example

Browse source
This commit is contained in:
Eric Liu 2020-10-30 10:43:30 -07:00
commit 25a7ceacf8
1 changed files with 22 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

46
docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
View file

@ -1,38 +1,32 @@
<script> <script>
import { CodeSnippet, Tabs, Tab, TabContent } from "carbon-components-svelte"; import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
let selected = 0; let toggled = false;
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n"); const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
</script> </script>
<style> <style>
p { .hidden {
margin-bottom: var(--cds-spacing-05); display: none;
} }
</style> </style>
<Tabs bind:selected> <ToggleSmall
<Tab label="Tab 1" /> style="margin-bottom: var(--cds-spacing-05)"
<Tab label="Tab 2" /> labelText="Show code snippets"
<div slot="content"> bind:toggled
<TabContent> />
<p>Tab 2 contains a multi-line code snippet.</p>
<p> {#if toggled}
Inactive tab content is visually hidden but still rendered in the DOM. <h5>"Show more" will not render</h5><br />
As a result, the "Show more" button will not appear because the computed {/if}
height of the code element is 0. <div class:hidden="{!toggled}">
</p> <CodeSnippet type="multi" code="{code}" />
<p> </div>
To work around this, you can force the code snippet to be re-rendered
when the tab content is active. {#if toggled}
</p> <br /><br />
</TabContent> <h5>"Show more" will render</h5><br />
<TabContent>
<p>The "Show more" button should appear.</p>
{#if selected === 1}
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />
{/if} {/if}
</TabContent>
</div>
</Tabs>