<script>
import {flip} from 'svelte/animate';
let horizontal = false;
let next = 1;
let list = [];
const addItem = () => list = [next++, ...list];
const removeItem = number => list = list.filter(n => n !== number);
const options = {};
</script>
<label>
Horizontal
<input type="checkbox" bind:checked={horizontal} />
</label>
<button on:click={addItem}>Add</button>
{#each list as n (n)}
<div animate:flip={options} class:horizontal class="container">
<button on:click={() => removeItem(n)}>{n}</button>
</div>
{/each}
<style>
.container {
width: fit-content; /* necessary for correct button sizes */
}
.horizontal {
display: inline-block;
margin-left: 10px;
}
</style>