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

refactor(skeleton-text): forward events

Browse source 
Supports #7
This commit is contained in:
Eric Liu 2019-12-19 19:34:29 -08:00
commit f0869edceb
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/SkeletonText/SkeletonText.svelte
View file

@ -5,7 +5,7 @@
export let lineCount = 3; export let lineCount = 3;
export let width = '100%'; export let width = '100%';
export let heading = false; export let heading = false;
export let props = {}; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
@ -14,6 +14,7 @@
const widthNum = parseInt(width, 10); const widthNum = parseInt(width, 10);
const widthPx = width.includes('px'); const widthPx = width.includes('px');
const widthPercent = width.includes('%'); const widthPercent = width.includes('%');
let lines = []; let lines = [];
$: if (paragraph) { $: if (paragraph) {
@ -27,11 +28,18 @@
</script> </script>
{#if paragraph} {#if paragraph}
<div> <div on:click on:mouseover on:mouseenter on:mouseleave {style}>
{#each lines as { width }} {#each lines as { width }}
<p {...props} class={_class} style={`width: ${width};`} /> <p class={_class} style={`width: ${width};`} />
{/each} {/each}
</div> </div>
{:else} {:else}
<p {...props} class={_class} style={`width: ${width};`} /> <p
on:click
on:mouseover
on:mouseenter
on:mouseleave
{style}
class={_class}
style={`width: ${width};`} />
{/if} {/if}