Add SplitText component

This commit is contained in:
2021-10-18 16:18:16 +02:00
parent 7f8dc8cec6
commit 691e499e9e
3 changed files with 65 additions and 5 deletions

View File

@@ -0,0 +1,38 @@
<script lang="ts">
import { splitText } from '$utils/functions'
export let text: string
export let mode: string = undefined
export let clone: boolean = false
$: split = splitText(text, mode)
const classes = [
'text-split',
$$props.class
].join(' ').trim()
</script>
{#if clone}
{#if mode && mode === 'words'}
<span class={classes}>
{#each Array(2) as _, index}
<span class="text-split__line" aria-hidden={index === 1}>
{#each split as word, i}
<span class="word" style="--i-w: {i};">{word}</span>{#if word.includes('\n')}<br>{/if}
<!-- svelte-ignore empty-block -->
{#if i < split.length - 1}{/if}
{/each}
</span>
{/each}
</span>
{:else}
<span class={classes}>
{#each Array(2) as _, index}
<span class="text-split__line" aria-hidden={index === 1}>
{text}
</span>
{/each}
</span>
{/if}
{/if}