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

feat(code-snippet): add skeleton state

Browse source
This commit is contained in:
Eric Liu 2020-01-11 18:39:33 -08:00
commit fd7164a312
1 changed files with 66 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -10,6 +10,7 @@
export let light = false; export let light = false;
export let showLessText = 'Show less'; export let showLessText = 'Show less';
export let showMoreText = 'Show more'; export let showMoreText = 'Show more';
export let skeleton = false;
export let style = undefined; export let style = undefined;
export let type = 'single'; export let type = 'single';
@ -19,18 +20,26 @@
import Button from '../Button'; import Button from '../Button';
import Copy from '../Copy'; import Copy from '../Copy';
import CopyButton from '../CopyButton'; import CopyButton from '../CopyButton';
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
let codeRef = undefined; let codeRef = undefined;
let expanded = false; let expanded = false;
let showMoreLess = false; let showMoreLess = false;
afterUpdate(() => { afterUpdate(() => {
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255; if (type === 'multi' && codeRef) {
showMoreLess = codeRef.getBoundingClientRect().height > 255;
}
}); });
$: expandText = expanded ? showLessText : showMoreText; $: expandText = expanded ? showLessText : showMoreText;
</script> </script>
{#if skeleton}
<CodeSnippetSkeleton class={className} {type} {style} />
{/if}
{#if !skeleton}
{#if type === 'inline'} {#if type === 'inline'}
<Copy <Copy
aria-label={$$props['aria-label'] || copyLabel} aria-label={$$props['aria-label'] || copyLabel}
@ -87,3 +96,4 @@
{/if} {/if}
</div> </div>
{/if} {/if}
{/if}