Logic

0 is between 0 and 5

This button uses if and else if statements to show where count is between 0, 5, and 10.

xml

<button class="btn variant-filled-secondary mx-4 my-2" on:click={increment}>
	Clicked {count}
	{count === 1 ? 'Time' : 'Times'}
</button>

{#if count >= 10}
	<p class="mx-4 my-2">{count} is greater than or equal to 10</p>
{:else if count < 5}
	<p class="mx-4 my-2">{count} is between 0 and 5</p>
{:else}
	<p class="mx-4 my-2">{count} is between 5 and 10</p>
{/if}

Pick a Color

This section uses and each block to go through an array of colors.

xml

<div class="mx-4 my-2 grid grid-cols-7 gap-2 max-w-md">
	{#each colors as color, i}
		<button
			class="btn rounded-full hover:-translate-y-2 hover:scale-110 aria-selected:shadow-xl"
			aria-current={selected === color}
			aria-label={color}
			style="background: {color}"
			on:click={() => (selected = color)}>{i + 1}
		</button>
	{/each}
</div>

🍎 = apple

🍌 = banana

🥕 = carrot

🍩 = doughnut

🥚 = egg

This section uses an each block to display an array of things with a key so they can be removed.

xml

{#each things as thing (thing.id)}
	<Thing name={thing.name} />
{/each}

This section uses an await block to handle a promise.

xml

{#await promise}
	<div class="mx-4 my-2"><ProgressRadial value={undefined} /></div>
{:then number}
	<p class="mx-4 my-2">The number is {number}</p>
{:catch error}
	<p class="text-error-500 mx-4 my-2">{error.message}</p>
{/await}

Schultz-Hettinger

Rohan

Glover

Boyer

Considine

Wehner

Bahringer

Kuphal

Pollich

Crooks

Brown

Pfannerstill

Walker

Carter

Schinner

Gusikowski-Wolff

Brekke

Kilback-Upton

Greenfelder

King

Graham

Schaden

Goodwin

White

Maggio

This section uses an each block to iterate through an array of objects and display them.

xml

<div class="flex flex-wrap bg-secondary-300 justify-center">
	{#each twentyFiveAvatars as { lastName, avatar }}
		<div class="flex flex-col items-center m-4">
			<img src={avatar} alt={lastName} class="w-24 h-24 rounded-full" />
			<p class="text-surface-900 font-bold">{lastName}</p>
		</div>
	{/each}
</div>