86 lines
No EOL
1.6 KiB
Text
86 lines
No EOL
1.6 KiB
Text
<script lang="typescript">
|
|
// Nested is defined elsewhere
|
|
import Nested from './Nested.svelte';
|
|
|
|
let src = 'example.png';
|
|
let name = 'world';
|
|
|
|
let names = [
|
|
{ id: 'id0001', name: 'Name 1' },
|
|
{ id: 'id0002', name: 'Name 2' },
|
|
{ id: 'id0003', name: 'Name 3' }
|
|
];
|
|
</script>
|
|
|
|
<style>
|
|
h1 {
|
|
color: red;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 2em;
|
|
}
|
|
</style>
|
|
|
|
<style lang="sass">
|
|
$color: red
|
|
h1
|
|
color: $color
|
|
font-family: Arial, Helvetica, sans-serif
|
|
font-size: 2em
|
|
</style>
|
|
|
|
<h1>Hello {name}!</h1>
|
|
<img {src} alt="Example image">
|
|
|
|
<!-- import external component -->
|
|
<Nested/>
|
|
|
|
<ul>
|
|
{#each names as { id, name }, i}
|
|
<li>{name} ({id})</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<template>
|
|
<form on:submit|preventDefault="{submitSearch}">
|
|
<input type="search" bind:value="{name}" required />
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
|
|
{#if porridge.temperature > 100}
|
|
<p>too hot!</p>
|
|
{:else if 80 > porridge.temperature}
|
|
<p>too cold!</p>
|
|
{:else}
|
|
<p>just right!</p>
|
|
{/if}
|
|
|
|
{#await promise}
|
|
<!-- promise is pending -->
|
|
<p>waiting for the promise to resolve...</p>
|
|
{:then value}
|
|
<!-- promise was fulfilled -->
|
|
<p>The value is {value}</p>
|
|
{:catch error}
|
|
<!-- promise was rejected -->
|
|
<p>Something went wrong: {error.message}</p>
|
|
{/await}
|
|
|
|
{#await promise then value}
|
|
<p>The value is {value}</p>
|
|
{/await}
|
|
|
|
{#await promise catch error}
|
|
<p>The error is {error}</p>
|
|
{/await}
|
|
|
|
{#key value}
|
|
<div transition:fade>{value}</div>
|
|
{/key}
|
|
|
|
<div class="blog-post">
|
|
<h1>{post.title}</h1>
|
|
{@html post.content}
|
|
</div>
|
|
|
|
{@debug user}
|
|
</template> |