Created
May 26, 2021 14:32
-
-
Save tanhauhau/b8ccb8241b0b1c56fc1dbb2fbc1eeb2b to your computer and use it in GitHub Desktop.
Svelte Component API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { createEventDispatcher } from 'svelte'; | |
| import { getContext } from 'svelte'; | |
| import { fade } from 'svelte/transition'; | |
| const dispatch = createEventDispatcher(); | |
| export let a = 1; | |
| export let b = 1; | |
| export function reset() { | |
| a = 1; | |
| b = 1; | |
| } | |
| $: product = a * b; | |
| $: dispatch('product', { product, a, b }) | |
| const c = getContext('c'); | |
| let d = true; | |
| </script> | |
| <input type="checkbox" bind:checked={d} /> | |
| <!-- {#if d} --> | |
| <div transition:fade style="display: grid; grid-template-columns: 10px 230px; align-items: center; gap: 5px;"> | |
| <div style="grid-column: 2 / 3;"> | |
| <button on:click={() => a-=5}>-</button> | |
| <input type="number" bind:value={a} /> | |
| <button on:click={() => a+=5}>+</button> | |
| </div> | |
| <div> | |
| X | |
| </div> | |
| <div> | |
| <button on:click={() => b-=5}>-</button> | |
| <input type="number" bind:value={b} /> | |
| <button on:click={() => b+=5}>+</button> | |
| </div> | |
| <div>=</div> | |
| <div style="text-align: right;">{product}</div> | |
| </div> | |
| C: {c} | |
| <!-- {/if} --> | |
| <style> | |
| input, button { | |
| margin: 0; | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset='utf-8'> | |
| <meta name='viewport' content='width=device-width,initial-scale=1'> | |
| <title>Svelte app</title> | |
| <link rel='icon' type='image/png' href='/favicon.png'> | |
| <link rel='stylesheet' href='/global.css'> | |
| <link rel='stylesheet' href='/build/bundle.css'> | |
| <script defer src='/build/bundle.js'></script> | |
| </head> | |
| <body> | |
| <h1>Hello Component API</h1> | |
| <main></main> | |
| <button id="random">Randomize</button> | |
| <button id="reset">Reset</button> | |
| <button id="destroy">Destroy</button> | |
| <footer>Examples prepared by lihautan</footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Component from './Component.svelte'; | |
| const component = new Component({ | |
| target: document.body, | |
| anchor: document.querySelector('footer'), | |
| props: { | |
| a: 5, | |
| b: 10, | |
| }, | |
| context: new Map([['c', 20]]), | |
| intro: true, | |
| }); | |
| document.querySelector('#random') | |
| .addEventListener('click', function () { | |
| component.$set({ | |
| a: Math.floor(Math.random() * 100), | |
| b: Math.floor(Math.random() * 100) | |
| }) | |
| }); | |
| document.querySelector('#reset') | |
| .addEventListener('click', function () { | |
| component.reset(); | |
| }); | |
| document.querySelector('#destroy') | |
| .addEventListener('click', function () { | |
| component.$destroy(); | |
| }); | |
| component.$on('product', (event) => { | |
| console.log('product event', event.detail) | |
| }) | |
| // import App from './App.svelte'; | |
| // var app = new App({ | |
| // target: document.body | |
| // }); | |
| // export default app; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment