diff options
Diffstat (limited to 'examples/framework-svelte/src/components/Counter.svelte')
-rw-r--r-- | examples/framework-svelte/src/components/Counter.svelte | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte new file mode 100644 index 000000000..a11538645 --- /dev/null +++ b/examples/framework-svelte/src/components/Counter.svelte @@ -0,0 +1,41 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + interface Props { + children?: Snippet + } + + let { children }: Props = $props(); + let count = $state(0); + + function add() { + count += 1; + } + + function subtract() { + count -= 1; + } +</script> + +<div class="counter"> + <button onclick={subtract}>-</button> + <pre>{count}</pre> + <button onclick={add}>+</button> +</div> +<div class="message"> + {@render children?.()} +</div> + +<style> + .counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; + } + + .message { + text-align: center; + } +</style> |