added thing ID to improve readability

pull/5773/head
Aswin 5 years ago
parent 3561bf2b96
commit b2b754c425

@ -19,5 +19,5 @@
</button> </button>
{#each things as thing} {#each things as thing}
<Thing current={thing.color}/> <Thing currentColor={thing.color} currentId={thing.id}/>
{/each} {/each}

@ -1,14 +1,16 @@
<script> <script>
// `current` is updated whenever the prop value changes... // `current` is updated whenever the prop value changes...
export let current; export let currentColor;
export let currentId;
// ...but `initial` is fixed upon initialisation // ...but `initial` is fixed upon initialisation
const initial = current; const initialColor = currentColor;
const initialId = currentId;
</script> </script>
<p> <p>
<span style="background-color: {initial}">initial</span> <span style="background-color: {initialColor}">Initial, Thing Id: {initialId}</span>
<span style="background-color: {current}">current</span> <span style="background-color: {currentColor}">Current, Thing Id: {currentId}</span>
</p> </p>
<style> <style>
@ -16,9 +18,13 @@
display: inline-block; display: inline-block;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
margin: 0 0.2em 0.2em 0; margin: 0 0.2em 0.2em 0;
width: 4em; width: 5em;
text-align: center; text-align: center;
border-radius: 0.2em; border-radius: 0.2em;
color: white; color: white;
} }
p{
margin-top: 0.1em;
margin-bottom: 0.2em;
}
</style> </style>

@ -19,5 +19,5 @@
</button> </button>
{#each things as thing (thing.id)} {#each things as thing (thing.id)}
<Thing current={thing.color}/> <Thing currentColor={thing.color} currentId={thing.id}/>
{/each} {/each}

@ -1,14 +1,16 @@
<script> <script>
// `current` is updated whenever the prop value changes... // `current` is updated whenever the prop value changes...
export let current; export let currentColor;
export let currentId;
// ...but `initial` is fixed upon initialisation // ...but `initial` is fixed upon initialisation
const initial = current; const initialColor = currentColor;
const initialId = currentId;
</script> </script>
<p> <p>
<span style="background-color: {initial}">initial</span> <span style="background-color: {initialColor}">Initial, Thing Id: {initialId}</span>
<span style="background-color: {current}">current</span> <span style="background-color: {currentColor}">Current, Thing Id: {currentId}</span>
</p> </p>
<style> <style>
@ -16,7 +18,7 @@
display: inline-block; display: inline-block;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
margin: 0 0.2em 0.2em 0; margin: 0 0.2em 0.2em 0;
width: 4em; width: 5em;
text-align: center; text-align: center;
border-radius: 0.2em; border-radius: 0.2em;
color: white; color: white;

Loading…
Cancel
Save