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>
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");
</script>
<style>
p {
margin-bottom: var(--cds-spacing-05);
.hidden {
display: none;
}
</style>
<Tabs bind:selected>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<div slot="content">
<TabContent>
<p>Tab 2 contains a multi-line code snippet.</p>
<p>
Inactive tab content is visually hidden but still rendered in the DOM.
As a result, the "Show more" button will not appear because the computed
height of the code element is 0.
</p>
<p>
To work around this, you can force the code snippet to be re-rendered
when the tab content is active.
</p>
</TabContent>
<TabContent>
<p>The "Show more" button should appear.</p>
{#if selected === 1}
<ToggleSmall
style="margin-bottom: var(--cds-spacing-05)"
labelText="Show code snippets"
bind:toggled
/>
{#if toggled}
<h5>"Show more" will not render</h5><br />
{/if}
<div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" />
</div>
{#if toggled}
<br /><br />
<h5>"Show more" will render</h5><br />
<CodeSnippet type="multi" code="{code}" />
{/if}
</TabContent>
</div>
</Tabs>