Last active
August 1, 2020 18:20
-
-
Save lega911/22128e750fef5361837e4696162d6d36 to your computer and use it in GitHub Desktop.
Example of fragments
This file contains 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> | |
| const run = () => {}; | |
| const runLots = () => {}; | |
| const add = () => {}; | |
| const partialUpdate = () => {}; | |
| </script> | |
| {#fragment:button id, name} | |
| <div class="col-sm-6 smallpad"> | |
| <button type="button" class="btn" id={id} @click>{name}</button> | |
| </div> | |
| {/fragment} | |
| <fragment:button id="run" @click={run} name="Create 1,000 rows" /> | |
| <fragment:button id="runlots" @click={runLots} name="Create 10,000 rows" /> | |
| <fragment:button id="add" @click={add} name="Append 1,000 rows" /> | |
| <fragment:button id="update" @click={partialUpdate} name="Update every 10th row" /> | |
| ... |
This file contains 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> | |
| let colors = ['Green', 'Yellow', 'Red', 'Blue']; | |
| const click = (text, color) => {console.log(text, color)}; | |
| </script> | |
| {#each colors as color} | |
| {#fragment:box text} | |
| <div @click={click(text, color)}> | |
| <b>{text}</b>: {color} | |
| </div> | |
| {/fragment} | |
| <fragment:box text="First" /> | |
| <fragment:box text="Second" /> | |
| {/each} |
This file contains 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> | |
| let tree = [{ | |
| name: 'OS', | |
| children: [{ | |
| name: 'Linux', | |
| children: [{name: 'Ubuntu'}, {name: 'Debian'}, {name: 'RedHat'}] | |
| }, { | |
| name: 'MacOS X' | |
| }] | |
| }]; | |
| const click = (name) => {console.log(name)}; | |
| </script> | |
| <fragment:draw list={tree}> | |
| {#fragment:draw list} | |
| <ul> | |
| {#each list as it} | |
| <li @click|stopPropagation={click(it.name)}> | |
| {it.name} | |
| {#if it.children} | |
| <fragment:draw list={it.children} /> | |
| {/if} | |
| </li> | |
| {/each} | |
| </ul> | |
| {/fragment} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment