added thing ID to improve readability

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

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

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

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

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

Loading…
Cancel
Save