msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Changing tutorial/example order from script-style-html to script-html-style (#6213)

Browse Source 
Also change button style in one tutorial
pull/6229/head
BabakFP 4 years ago committed by GitHub
parent 697d4c7f51
commit ec2540787a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
148 changed files with 1529 additions and 1447 deletions
Show Stats Download Patch File Download Diff File

6
site/content/examples/00-introduction/02-styling/App.svelte
Unescape View File

@ -1,9 +1,9 @@
<p>Styled!</p>
<style> <style>
p { p {
color: purple; color: purple;
font-family: 'Comic Sans MS', cursive; font-family: 'Comic Sans MS', cursive;
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>Styled!</p>

8
site/content/examples/00-introduction/03-nested-components/App.svelte
Unescape View File

@ -2,13 +2,13 @@
import Nested from './Nested.svelte'; import Nested from './Nested.svelte';
</script> </script>
<p>These styles...</p>
<Nested/>
<style> <style>
p { p {
color: purple; color: purple;
font-family: 'Comic Sans MS', cursive; font-family: 'Comic Sans MS', cursive;
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>These styles...</p>
<Nested/>

10
site/content/examples/04-events/00-dom-events/App.svelte
Unescape View File

@ -7,10 +7,10 @@
} }
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove={handleMousemove}> <div on:mousemove={handleMousemove}>
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

10
site/content/examples/04-events/01-inline-handlers/App.svelte
Unescape View File

@ -2,10 +2,10 @@
let m = { x: 0, y: 0 }; let m = { x: 0, y: 0 };
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}"> <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

10
site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
Unescape View File

@ -1,3 +1,7 @@
<button on:click>
Click me
</button>
<style> <style>
button { button {
height: 4rem; height: 4rem;
@ -15,8 +19,4 @@
background-position: 0; background-position: 0;
color: #aaa; color: #aaa;
} }
</style> </style>
<button on:click>
Click me
</button>

10
site/content/examples/05-bindings/04-textarea-inputs/App.svelte
Unescape View File

@ -3,10 +3,10 @@
let text = `Some words are *italic*, some are **bold**`; let text = `Some words are *italic*, some are **bold**`;
</script> </script>
<style>
textarea { width: 100%; height: 200px; }
</style>
<textarea bind:value={text}></textarea> <textarea bind:value={text}></textarea>
{@html marked(text)} {@html marked(text)}
<style>
textarea { width: 100%; height: 200px; }
</style>

10
site/content/examples/05-bindings/06-select-bindings/App.svelte
Unescape View File

@ -14,10 +14,6 @@
} }
</script> </script>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>
<h2>Insecurity questions</h2> <h2>Insecurity questions</h2>
<form on:submit|preventDefault={handleSubmit}> <form on:submit|preventDefault={handleSubmit}>
@ -36,4 +32,8 @@
</button> </button>
</form> </form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p> <p>selected question {selected ? selected.id : '[waiting...]'}</p>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>

54
site/content/examples/05-bindings/09-media-elements/App.svelte
Unescape View File

@ -51,6 +51,32 @@
} }
</script> </script>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
bind:paused>
<track kind="captions"/>
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>
<style> <style>
div { div {
position: relative; position: relative;
@ -102,30 +128,4 @@
video { video {
width: 100%; width: 100%;
} }
</style> </style>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
bind:paused>
<track kind="captions"/>
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>

12
site/content/examples/05-bindings/10-dimensions/App.svelte
Unescape View File

@ -5,11 +5,6 @@
let text = 'edit me'; let text = 'edit me';
</script> </script>
<style>
input { display: block; }
div { display: inline-block; }
</style>
<input type=range bind:value={size}> <input type=range bind:value={size}>
<input bind:value={text}> <input bind:value={text}>
@ -17,4 +12,9 @@
<div bind:clientWidth={w} bind:clientHeight={h}> <div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span> <span style="font-size: {size}px">{text}</span>
</div> </div>
<style>
input { display: block; }
div { display: inline-block; }
</style>

14
site/content/examples/05-bindings/11-bind-this/App.svelte
Unescape View File

@ -38,6 +38,12 @@
}); });
</script> </script>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>
<style> <style>
canvas { canvas {
width: 100%; width: 100%;
@ -46,10 +52,4 @@
-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; -webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
} }
</style> </style>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>

28
site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
Unescape View File

@ -10,19 +10,6 @@
const submit = () => dispatch('submit'); const submit = () => dispatch('submit');
</script> </script>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>
<div class="keypad"> <div class="keypad">
<button on:click={select(1)}>1</button> <button on:click={select(1)}>1</button>
<button on:click={select(2)}>2</button> <button on:click={select(2)}>2</button>
@ -37,4 +24,17 @@
<button disabled={!value} on:click={clear}>clear</button> <button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</button> <button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button> <button disabled={!value} on:click={submit}>submit</button>
</div> </div>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>

28
site/content/examples/06-lifecycle/00-onmount/App.svelte
Unescape View File

@ -9,6 +9,20 @@
}); });
</script> </script>
<h1>Photo album</h1>
<div class="photos">
{#each photos as photo}
<figure>
<img src={photo.thumbnailUrl} alt={photo.title}>
<figcaption>{photo.title}</figcaption>
</figure>
{:else}
<!-- this block renders when photos.length === 0 -->
<p>loading...</p>
{/each}
</div>
<style> <style>
.photos { .photos {
width: 100%; width: 100%;
@ -22,17 +36,3 @@
margin: 0; margin: 0;
} }
</style> </style>
<h1>Photo album</h1>
<div class="photos">
{#each photos as photo}
<figure>
<img src={photo.thumbnailUrl} alt={photo.title}>
<figcaption>{photo.title}</figcaption>
</figure>
{:else}
<!-- this block renders when photos.length === 0 -->
<p>loading...</p>
{/each}
</div>

28
site/content/examples/06-lifecycle/02-update/App.svelte
Unescape View File

@ -51,6 +51,20 @@
} }
</script> </script>
<div class="chat">
<h1>Eliza</h1>
<div class="scrollable" bind:this={div}>
{#each comments as comment}
<article class={comment.author}>
<span>{comment.text}</span>
</article>
{/each}
</div>
<input on:keydown={handleKeydown}>
</div>
<style> <style>
.chat { .chat {
display: flex; display: flex;
@ -90,17 +104,3 @@
border-radius: 1em 1em 0 1em; border-radius: 1em 1em 0 1em;
} }
</style> </style>
<div class="chat">
<h1>Eliza</h1>
<div class="scrollable" bind:this={div}>
{#each comments as comment}
<article class={comment.author}>
<span>{comment.text}</span>
</article>
{/each}
</div>
<input on:keydown={handleKeydown}>
</div>

6
site/content/examples/06-lifecycle/03-tick/App.svelte
Unescape View File

@ -27,11 +27,11 @@
} }
</script> </script>
<textarea value={text} on:keydown={handleKeydown}></textarea>
<style> <style>
textarea { textarea {
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
</style> </style>
<textarea value={text} on:keydown={handleKeydown}></textarea>

16
site/content/examples/08-motion/00-tweened/App.svelte
Unescape View File

@ -8,13 +8,6 @@
}); });
</script> </script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress> <progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}"> <button on:click="{() => progress.set(0)}">
@ -35,4 +28,11 @@
<button on:click="{() => progress.set(1)}"> <button on:click="{() => progress.set(1)}">
100% 100%
</button> </button>
<style>
progress {
display: block;
width: 100%;
}
</style>

12
site/content/examples/08-motion/01-spring/App.svelte
Unescape View File

@ -9,11 +9,6 @@
let size = spring(10); let size = spring(10);
</script> </script>
<style>
svg { width: 100%; height: 100%; margin: -8px }
circle { fill: #ff3e00 }
</style>
<div style="position: absolute; right: 1em;"> <div style="position: absolute; right: 1em;">
<label> <label>
<h3>stiffness ({coords.stiffness})</h3> <h3>stiffness ({coords.stiffness})</h3>
@ -32,4 +27,9 @@
on:mouseup="{() => size.set(10)}" on:mouseup="{() => size.set(10)}"
> >
<circle cx={$coords.x} cy={$coords.y} r={$size}/> <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg> </svg>
<style>
svg { width: 100%; height: 100%; margin: -8px }
circle { fill: #ff3e00 }
</style>

24
site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
Unescape View File

@ -22,6 +22,17 @@
} }
</script> </script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}
<style> <style>
.centered { .centered {
position: absolute; position: absolute;
@ -35,15 +46,4 @@
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
font-size: 4em; font-size: 4em;
} }
</style> </style>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}

78
site/content/examples/10-animations/00-animate/App.svelte
Unescape View File

@ -46,6 +46,44 @@
} }
</script> </script>
<div class='board'>
<input
class="new-todo"
placeholder="what needs to be done?"
on:keydown="{event => event.key === 'Enter' && add(event.target)}"
>
<div class='left'>
<h2>todo</h2>
{#each todos.filter(t => !t.done) as todo (todo.id)}
<label
in:receive="{{key: todo.id}}"
out:send="{{key: todo.id}}"
animate:flip
>
<input type=checkbox bind:checked={todo.done}>
{todo.description}
<button on:click="{() => remove(todo)}">x</button>
</label>
{/each}
</div>
<div class='right'>
<h2>done</h2>
{#each todos.filter(t => t.done) as todo (todo.id)}
<label
in:receive="{{key: todo.id}}"
out:send="{{key: todo.id}}"
animate:flip
>
<input type=checkbox bind:checked={todo.done}>
{todo.description}
<button on:click="{() => remove(todo)}">x</button>
</label>
{/each}
</div>
</div>
<style> <style>
.new-todo { .new-todo {
font-size: 1.4em; font-size: 1.4em;
@ -106,42 +144,4 @@
label:hover button { label:hover button {
opacity: 1; opacity: 1;
} }
</style> </style>
<div class='board'>
<input
class="new-todo"
placeholder="what needs to be done?"
on:keydown="{event => event.key === 'Enter' && add(event.target)}"
>
<div class='left'>
<h2>todo</h2>
{#each todos.filter(t => !t.done) as todo (todo.id)}
<label
in:receive="{{key: todo.id}}"
out:send="{{key: todo.id}}"
animate:flip
>
<input type=checkbox bind:checked={todo.done}>
{todo.description}
<button on:click="{() => remove(todo)}">x</button>
</label>
{/each}
</div>
<div class='right'>
<h2>done</h2>
{#each todos.filter(t => t.done) as todo (todo.id)}
<label
in:receive="{{key: todo.id}}"
out:send="{{key: todo.id}}"
animate:flip
>
<input type=checkbox bind:checked={todo.done}>
{todo.description}
<button on:click="{() => remove(todo)}">x</button>
</label>
{/each}
</div>
</div>

60
site/content/examples/11-easing/00-easing/App.svelte
Unescape View File

@ -37,35 +37,6 @@
$: current && runAnimations(); $: current && runAnimations();
</script> </script>
<style>
.easing-vis {
display: flex;
max-height: 95%;
max-width: 800px;
margin: auto;
padding: 10px;
border: 1px solid #333;
border-radius: 2px;
padding: 20px;
}
svg {
width: 100%;
margin: 0 20px 0 0;
}
.graph {
transform: translate(200px,400px)
}
@media (max-width:600px) {
.easing-vis {
flex-direction: column;
max-height: calc(100% - 3rem);
}
}
</style>
<div bind:offsetWidth={width} class="easing-vis"> <div bind:offsetWidth={width} class="easing-vis">
<svg viewBox="0 0 1400 1802"> <svg viewBox="0 0 1400 1802">
<g class="canvas"> <g class="canvas">
@ -103,4 +74,33 @@
bind:current_type bind:current_type
on:play={runAnimations} on:play={runAnimations}
/> />
</div> </div>
<style>
.easing-vis {
display: flex;
max-height: 95%;
max-width: 800px;
margin: auto;
padding: 10px;
border: 1px solid #333;
border-radius: 2px;
padding: 20px;
}
svg {
width: 100%;
margin: 0 20px 0 0;
}
.graph {
transform: translate(200px,400px)
}
@media (max-width:600px) {
.easing-vis {
flex-direction: column;
max-height: calc(100% - 3rem);
}
}
</style>

133
site/content/examples/11-easing/00-easing/Controls.svelte
Unescape View File

@ -14,6 +14,72 @@
$: mobile = width && width < 600; $: mobile = width && width < 600;
</script> </script>
<div class="easing-sidebar">
<div class="easing-types">
<h3>Ease</h3>
{#if mobile}
<select bind:value={current_ease}>
{#each [...eases] as [name]}
<option
value={name}
class:selected={name === current_ease}
>
{name}
</option>
{/each}
</select>
{:else}
<ul>
{#each [...eases] as [name]}
<li
class:selected={name === current_ease}
on:click={() => current_ease = name}
>
{name}
</li>
{/each}
</ul>
{/if}
<h3>Type</h3>
{#if mobile }
<select bind:value={current_type}>
{#each types as [name, type]}
<option
value={type}
>
{name}
</option>
{/each}
</select>
{:else}
<ul>
{#each types as [name, type]}
<li
class:selected={type === current_type}
on:click={() => current_type = type}
>
{name}
</li>
{/each}
</ul>
{/if}
</div>
<h4>
Duration
</h4>
<div class="duration">
<span>
<input type="number" bind:value={duration} min="0" step="100"/>
<button class="number" on:click={() => duration -= 100}>-</button>
<button class="number" on:click={() => duration += 100}>+</button>
</span>
<button class="play" on:click={() => dispatch('play')}>
{playing ? 'Restart' : 'Play'}
</button>
</div>
</div>
<style> <style>
.easing-sidebar { .easing-sidebar {
width: 11em; width: 11em;
@ -118,69 +184,4 @@
margin-right: 10px; margin-right: 10px;
} }
} }
</style> </style>
<div class="easing-sidebar">
<div class="easing-types">
<h3>Ease</h3>
{#if mobile}
<select bind:value={current_ease}>
{#each [...eases] as [name]}
<option
value={name}
class:selected={name === current_ease}
>
{name}
</option>
{/each}
</select>
{:else}
<ul>
{#each [...eases] as [name]}
<li
class:selected={name === current_ease}
on:click={() => current_ease = name}
>
{name}
</li>
{/each}
</ul>
{/if}
<h3>Type</h3>
{#if mobile }
<select bind:value={current_type}>
{#each types as [name, type]}
<option
value={type}
>
{name}
</option>
{/each}
</select>
{:else}
<ul>
{#each types as [name, type]}
<li
class:selected={type === current_type}
on:click={() => current_type = type}
>
{name}
</li>
{/each}
</ul>
{/if}
</div>
<h4>
Duration
</h4>
<div class="duration">
<span>
<input type="number" bind:value={duration} min="0" step="100"/>
<button class="number" on:click={() => duration -= 100}>-</button>
<button class="number" on:click={() => duration += 100}>+</button>
</span>
<button class="play" on:click={() => dispatch('play')}>
{playing ? 'Restart' : 'Play'}
</button>
</div>
</div>

28
site/content/examples/11-easing/00-easing/Grid.svelte
Unescape View File

@ -2,19 +2,6 @@
export let x, y; export let x, y;
</script> </script>
<style>
.grid-line {
stroke:#ccc;
opacity: 0.5;
stroke-width: 2;
}
.grid-line-xy {
stroke: tomato;
stroke-width: 2;
}
</style>
<svelte:options namespace="svg" /> <svelte:options namespace="svg" />
<rect <rect
@ -59,4 +46,17 @@
stroke=#999 stroke=#999
fill=none fill=none
stroke-width=2 stroke-width=2
/> />
<style>
.grid-line {
stroke:#ccc;
opacity: 0.5;
stroke-width: 2;
}
.grid-line-xy {
stroke: tomato;
stroke-width: 2;
}
</style>

78
site/content/examples/12-svg/01-clock/App.svelte
Unescape View File

@ -20,44 +20,6 @@
}); });
</script> </script>
<style>
svg {
width: 100%;
height: 100%;
}
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
}
.hour {
stroke: #333;
}
.minute {
stroke: #666;
}
.second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
</style>
<svg viewBox='-50 -50 100 100'> <svg viewBox='-50 -50 100 100'>
<circle class='clock-face' r='48'/> <circle class='clock-face' r='48'/>
@ -101,4 +63,42 @@
<line class='second' y1='10' y2='-38'/> <line class='second' y1='10' y2='-38'/>
<line class='second-counterweight' y1='10' y2='2'/> <line class='second-counterweight' y1='10' y2='2'/>
</g> </g>
</svg> </svg>
<style>
svg {
width: 100%;
height: 100%;
}
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
}
.hour {
stroke: #333;
}
.minute {
stroke: #666;
}
.second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
</style>

74
site/content/examples/12-svg/02-bar-chart/App.svelte
Unescape View File

@ -33,6 +33,42 @@
$: barWidth = innerWidth / xTicks.length; $: barWidth = innerWidth / xTicks.length;
</script> </script>
<h2>US birthrate by year</h2>
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
<svg>
<!-- y axis -->
<g class="axis y-axis" transform="translate(0,{padding.top})">
{#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
<line x2="100%"></line>
<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
</g>
{/each}
</g>
<!-- x axis -->
<g class="axis x-axis">
{#each points as point, i}
<g class="tick" transform="translate({xScale(i)},{height})">
<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
</g>
{/each}
</g>
<g class='bars'>
{#each points as point, i}
<rect
x="{xScale(i) + 2}"
y="{yScale(point.birthrate)}"
width="{barWidth - 4}"
height="{height - padding.bottom - yScale(point.birthrate)}"
></rect>
{/each}
</g>
</svg>
</div>
<style> <style>
h2 { h2 {
text-align: center; text-align: center;
@ -79,40 +115,4 @@
stroke: none; stroke: none;
opacity: 0.65; opacity: 0.65;
} }
</style> </style>
<h2>US birthrate by year</h2>
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
<svg>
<!-- y axis -->
<g class="axis y-axis" transform="translate(0,{padding.top})">
{#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
<line x2="100%"></line>
<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
</g>
{/each}
</g>
<!-- x axis -->
<g class="axis x-axis">
{#each points as point, i}
<g class="tick" transform="translate({xScale(i)},{height})">
<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
</g>
{/each}
</g>
<g class='bars'>
{#each points as point, i}
<rect
x="{xScale(i) + 2}"
y="{yScale(point.birthrate)}"
width="{barWidth - 4}"
height="{height - padding.bottom - yScale(point.birthrate)}"
></rect>
{/each}
</g>
</svg>
</div>

2
site/content/examples/12-svg/03-area-chart/App.svelte
Unescape View File

@ -108,4 +108,4 @@
.path-area { .path-area {
fill: rgba(0,100,100,0.2); fill: rgba(0,100,100,0.2);
} }
</style> </style>

20
site/content/examples/12-svg/04-scatterplot/App.svelte
Unescape View File

@ -3,6 +3,15 @@
import data from './data.js'; import data from './data.js';
</script> </script>
<div class="chart">
<h2>Anscombe's quartet</h2>
<Scatterplot points={data.a}/>
<Scatterplot points={data.b}/>
<Scatterplot points={data.c}/>
<Scatterplot points={data.d}/>
</div>
<style> <style>
.chart { .chart {
width: 100%; width: 100%;
@ -12,13 +21,4 @@
max-height: 480px; max-height: 480px;
margin: 0 auto; margin: 0 auto;
} }
</style> </style>
<div class="chart">
<h2>Anscombe's quartet</h2>
<Scatterplot points={data.a}/>
<Scatterplot points={data.b}/>
<Scatterplot points={data.c}/>
<Scatterplot points={data.d}/>
</div>

2
site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
Unescape View File

@ -92,4 +92,4 @@
.y-axis text { .y-axis text {
text-anchor: end; text-anchor: end;
} }
</style> </style>

66
site/content/examples/12-svg/05-svg-transitions/App.svelte
Unescape View File

@ -7,6 +7,38 @@
let visible = true; let visible = true;
</script> </script>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade="{{duration: 200}}" opacity=0.2>
<path
in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path
in:draw="{{duration: 1000}}"
style="stroke:#ff3e00; stroke-width: 1.5"
d={inner}
/>
</g>
</svg>
<div class="centered" out:fly="{{y: -20, duration: 800}}">
{#each 'SVELTE' as char, i}
<span
in:fade="{{delay: 1000 + i * 150, duration: 800}}"
>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible}>
toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
<style> <style>
svg { svg {
width: 100%; width: 100%;
@ -39,36 +71,4 @@
.centered span { .centered span {
will-change: filter; will-change: filter;
} }
</style> </style>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade="{{duration: 200}}" opacity=0.2>
<path
in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path
in:draw="{{duration: 1000}}"
style="stroke:#ff3e00; stroke-width: 1.5"
d={inner}
/>
</g>
</svg>
<div class="centered" out:fly="{{y: -20, duration: 800}}">
{#each 'SVELTE' as char, i}
<span
in:fade="{{delay: 1000 + i * 150, duration: 800}}"
>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible}>
toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

22
site/content/examples/13-actions/00-actions/App.svelte
Unescape View File

@ -25,6 +25,16 @@
} }
</script> </script>
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>
<style> <style>
.box { .box {
--width: 100px; --width: 100px;
@ -38,14 +48,4 @@
background-color: #ff3e00; background-color: #ff3e00;
cursor: move; cursor: move;
} }
</style> </style>
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>

24
site/content/examples/14-classes/00-classes/App.svelte
Unescape View File

@ -2,17 +2,6 @@
let current = 'foo'; let current = 'foo';
</script> </script>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<button <button
class:active="{current === 'foo'}" class:active="{current === 'foo'}"
on:click="{() => current = 'foo'}" on:click="{() => current = 'foo'}"
@ -26,4 +15,15 @@
<button <button
class:active="{current === 'baz'}" class:active="{current === 'baz'}"
on:click="{() => current = 'baz'}" on:click="{() => current = 'baz'}"
>baz</button> >baz</button>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>

14
site/content/examples/14-classes/01-class-shorthand/App.svelte
Unescape View File

@ -2,12 +2,6 @@
let big = false; let big = false;
</script> </script>
<style>
.big {
font-size: 4em;
}
</style>
<label> <label>
<input type=checkbox bind:checked={big}> <input type=checkbox bind:checked={big}>
big big
@ -15,4 +9,10 @@
<div class:big> <div class:big>
some {big ? 'big' : 'small'} text some {big ? 'big' : 'small'} text
</div> </div>
<style>
.big {
font-size: 4em;
}
</style>

10
site/content/examples/15-composition/00-slots/Box.svelte
Unescape View File

@ -1,3 +1,7 @@
<div class="box">
<slot></slot>
</div>
<style> <style>
.box { .box {
width: 300px; width: 300px;
@ -7,8 +11,4 @@
padding: 1em; padding: 1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
</style> </style>
<div class="box">
<slot></slot>
</div>

14
site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
Unescape View File

@ -1,3 +1,9 @@
<div class="box">
<slot>
<em>no content was provided</em>
</slot>
</div>
<style> <style>
.box { .box {
width: 300px; width: 300px;
@ -7,10 +13,4 @@
padding: 1em; padding: 1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
</style> </style>
<div class="box">
<slot>
<em>no content was provided</em>
</slot>
</div>

42
site/content/examples/15-composition/02-named-slots/ContactCard.svelte
Unescape View File

@ -1,3 +1,23 @@
<article class="contact-card">
<h2>
<slot name="name">
<span class="missing">Unknown name</span>
</slot>
</h2>
<div class="address">
<slot name="address">
<span class="missing">Unknown address</span>
</slot>
</div>
<div class="email">
<slot name="email">
<span class="missing">Unknown email</span>
</slot>
</div>
</article>
<style> <style>
.contact-card { .contact-card {
width: 300px; width: 300px;
@ -24,24 +44,4 @@
.address { background-image: url(tutorial/icons/map-marker.svg) } .address { background-image: url(tutorial/icons/map-marker.svg) }
.email { background-image: url(tutorial/icons/email.svg) } .email { background-image: url(tutorial/icons/email.svg) }
.missing { color: #999 } .missing { color: #999 }
</style> </style>
<article class="contact-card">
<h2>
<slot name="name">
<span class="missing">Unknown name</span>
</slot>
</h2>
<div class="address">
<slot name="address">
<span class="missing">Unknown address</span>
</slot>
</div>
<div class="email">
<slot name="email">
<span class="missing">Unknown email</span>
</slot>
</div>
</article>

28
site/content/examples/15-composition/03-slot-props/App.svelte
Unescape View File

@ -2,19 +2,6 @@
import Hoverable from './Hoverable.svelte'; import Hoverable from './Hoverable.svelte';
</script> </script>
<style>
div {
padding: 1em;
margin: 0 0 1em 0;
background-color: #eee;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<Hoverable let:hovering={active}> <Hoverable let:hovering={active}>
<div class:active> <div class:active>
{#if active} {#if active}
@ -43,4 +30,17 @@
<p>Hover over me!</p> <p>Hover over me!</p>
{/if} {/if}
</div> </div>
</Hoverable> </Hoverable>
<style>
div {
padding: 1em;
margin: 0 0 1em 0;
background-color: #eee;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>

24
site/content/examples/15-composition/04-conditional-slots/Profile.svelte
Unescape View File

@ -1,15 +1,3 @@
<style>
section {
width: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 16px;
box-shadow: 2px 2px 4px #dedede;
border: 1px solid #888;
margin-bottom: 16px;
}
</style>
<section> <section>
<div>Name</div> <div>Name</div>
<slot name="name" /> <slot name="name" />
@ -22,3 +10,15 @@
<slot name="phone" /> <slot name="phone" />
{/if} {/if}
</section> </section>
<style>
section {
width: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 16px;
box-shadow: 2px 2px 4px #dedede;
border: 1px solid #888;
margin-bottom: 16px;
}
</style>

2
site/content/examples/15-composition/05-modal/Modal.svelte
Unescape View File

@ -78,4 +78,4 @@
button { button {
display: block; display: block;
} }
</style> </style>

14
site/content/examples/16-context/00-context-api/Map.svelte
Unescape View File

@ -36,15 +36,15 @@
}); });
</script> </script>
<div bind:this={container}>
{#if map}
<slot></slot>
{/if}
</div>
<style> <style>
div { div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<div bind:this={container}>
{#if map}
<slot></slot>
{/if}
</div>

6
site/content/examples/17-special-elements/00-svelte-self/File.svelte
Unescape View File

@ -3,12 +3,12 @@
$: type = name.slice(name.lastIndexOf('.') + 1); $: type = name.slice(name.lastIndexOf('.') + 1);
</script> </script>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
<style> <style>
span { span {
padding: 0 0 0 1.5em; padding: 0 0 0 1.5em;
background: 0 0.1em no-repeat; background: 0 0.1em no-repeat;
background-size: 1em 1em; background-size: 1em 1em;
} }
</style> </style>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>

34
site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
Unescape View File

@ -10,6 +10,22 @@
} }
</script> </script>
<span class:expanded on:click={toggle}>{name}</span>
{#if expanded}
<ul>
{#each files as file}
<li>
{#if file.type === 'folder'}
<svelte:self {...file}/>
{:else}
<File {...file}/>
{/if}
</li>
{/each}
</ul>
{/if}
<style> <style>
span { span {
padding: 0 0 0 1.5em; padding: 0 0 0 1.5em;
@ -33,20 +49,4 @@
li { li {
padding: 0.2em 0; padding: 0.2em 0;
} }
</style> </style>
<span class:expanded on:click={toggle}>{name}</span>
{#if expanded}
<ul>
{#each files as file}
<li>
{#if file.type === 'folder'}
<svelte:self {...file}/>
{:else}
<File {...file}/>
{/if}
</li>
{/each}
</ul>
{/if}

10
site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Blue thing</strong>
strong { color: blue; }
</style>
<strong>blue thing</strong> <style>
strong {
color: blue;
}
</style>

10
site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Green thing</strong>
strong { color: green; }
</style>
<strong>green thing</strong> <style>
strong {
color: green;
}
</style>

10
site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Red thing</strong>
strong { color: red; }
</style>
<strong>red thing</strong> <style>
strong {
color: red;
}
</style>

24
site/content/examples/17-special-elements/02-svelte-window/App.svelte
Unescape View File

@ -8,6 +8,17 @@
} }
</script> </script>
<svelte:window on:keydown={handleKeydown}/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>
<style> <style>
div { div {
display: flex; display: flex;
@ -28,15 +39,4 @@
border-bottom: 5px solid rgba(0,0,0,0.2); border-bottom: 5px solid rgba(0,0,0,0.2);
color: #555; color: #555;
} }
</style> </style>
<svelte:window on:keydown={handleKeydown}/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>

2
site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
Unescape View File

@ -85,4 +85,4 @@
padding: 0; padding: 0;
background-color: rgb(253, 174, 51); background-color: rgb(253, 174, 51);
} }
</style> </style>

26
site/content/examples/17-special-elements/04-svelte-body/App.svelte
Unescape View File

@ -5,6 +5,18 @@
const handleMouseleave = () => hereKitty = false; const handleMouseleave = () => hereKitty = false;
</script> </script>
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
class:curious={hereKitty}
alt="Kitten wants to know what's going on"
src="tutorial/kitten.png"
>
<style> <style>
img { img {
position: absolute; position: absolute;
@ -22,16 +34,4 @@
:global(body) { :global(body) {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
class:curious={hereKitty}
alt="Kitten wants to know what's going on"
src="tutorial/kitten.png"
>

16
site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
Unescape View File

@ -31,13 +31,6 @@
} }
</script> </script>
<style>
article { margin: 0 0 1em 0; max-width: 800px }
h2, p { margin: 0 0 0.3em 0; }
audio { width: 100%; margin: 0.5em 0 1em 0; }
.playing { color: #ff3e00; }
</style>
<article class:playing={!paused}> <article class:playing={!paused}>
<h2>{title}</h2> <h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p> <p><strong>{composer}</strong> / performed by {performer}</p>
@ -49,4 +42,11 @@
controls controls
{src} {src}
></audio> ></audio>
</article> </article>
<style>
article { margin: 0 0 1em 0; max-width: 800px }
h2, p { margin: 0 0 0.3em 0; }
audio { width: 100%; margin: 0.5em 0 1em 0; }
.playing { color: #ff3e00; }
</style>

20
site/content/examples/20-7guis/02-7guis-temperature/App.svelte
Unescape View File

@ -1,13 +1,3 @@
<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
<style>
input {
width: 5em;
}
</style>
<script> <script>
let c = 0; let c = 0;
let f = 32; let f = 32;
@ -22,3 +12,13 @@
c =+(5 / 9 * (f - 32)).toFixed(1); c =+(5 / 9 * (f - 32)).toFixed(1);
} }
</script> </script>
<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
<style>
input {
width: 5em;
}
</style>

16
site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
Unescape View File

@ -37,14 +37,6 @@
} }
</script> </script>
<style>
select, input, button {
display: block;
margin: 0.5em 0;
font-size: inherit;
}
</style>
<select bind:value={isReturn}> <select bind:value={isReturn}>
<option value={false}>one-way flight</option> <option value={false}>one-way flight</option>
<option value={true}>return flight</option> <option value={true}>return flight</option>
@ -57,3 +49,11 @@
on:click={bookFlight} on:click={bookFlight}
disabled="{isReturn && (startDate >= endDate)}" disabled="{isReturn && (startDate >= endDate)}"
>book</button> >book</button>
<style>
select, input, button {
display: block;
margin: 0.5em 0;
font-size: inherit;
}
</style>

36
site/content/examples/20-7guis/05-7guis-crud/App.svelte
Unescape View File

@ -50,6 +50,23 @@
} }
</script> </script>
<input placeholder="filter prefix" bind:value={prefix}>
<select bind:value={i} size={5}>
{#each filteredPeople as person, i}
<option value={i}>{person.last}, {person.first}</option>
{/each}
</select>
<label><input bind:value={first} placeholder="first"></label>
<label><input bind:value={last} placeholder="last"></label>
<div class='buttons'>
<button on:click={create} disabled="{!first || !last}">create</button>
<button on:click={update} disabled="{!first || !last || !selected}">update</button>
<button on:click={remove} disabled="{!selected}">delete</button>
</div>
<style> <style>
* { * {
font-family: inherit; font-family: inherit;
@ -70,21 +87,4 @@
.buttons { .buttons {
clear: both; clear: both;
} }
</style> </style>
<input placeholder="filter prefix" bind:value={prefix}>
<select bind:value={i} size={5}>
{#each filteredPeople as person, i}
<option value={i}>{person.last}, {person.first}</option>
{/each}
</select>
<label><input bind:value={first} placeholder="first"></label>
<label><input bind:value={last} placeholder="last"></label>
<div class='buttons'>
<button on:click={create} disabled="{!first || !last}">create</button>
<button on:click={update} disabled="{!first || !last || !selected}">update</button>
<button on:click={remove} disabled="{!selected}">delete</button>
</div>

52
site/content/examples/20-7guis/06-7guis-circles/App.svelte
Unescape View File

@ -65,6 +65,31 @@ radius of the selected circle.
} }
</script> </script>
<div class="controls">
<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
<button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
</div>
<svg on:click={handleClick} >
{#each circles as circle}
<circle cx={circle.cx} cy={circle.cy} r={circle.r}
on:click="{event => select(circle, event)}"
on:contextmenu|stopPropagation|preventDefault="{() => {
adjusting = !adjusting;
if (adjusting) selected = circle;
}}"
fill="{circle === selected ? '#ccc': 'white'}"
/>
{/each}
</svg>
{#if adjusting}
<div class="adjuster">
<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
<input type="range" value={selected.r} on:input={adjust}>
</div>
{/if}
<style> <style>
.controls { .controls {
position: absolute; position: absolute;
@ -97,29 +122,4 @@ radius of the selected circle.
input[type='range'] { input[type='range'] {
width: 100%; width: 100%;
} }
</style> </style>
<div class="controls">
<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
<button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
</div>
<svg on:click={handleClick} >
{#each circles as circle}
<circle cx={circle.cx} cy={circle.cy} r={circle.r}
on:click="{event => select(circle, event)}"
on:contextmenu|stopPropagation|preventDefault="{() => {
adjusting = !adjusting;
if (adjusting) selected = circle;
}}"
fill="{circle === selected ? '#ccc': 'white'}"
/>
{/each}
</svg>
{#if adjusting}
<div class="adjuster">
<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
<input type="range" value={selected.r} on:input={adjust}>
</div>
{/if}

22
site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
Unescape View File

@ -26,6 +26,16 @@
onMount(hashchange); onMount(hashchange);
</script> </script>
<svelte:window on:hashchange={hashchange}/>
<main>
{#if item}
<Item {item} returnTo="#/top/{page}"/>
{:else if page}
<List {page}/>
{/if}
</main>
<style> <style>
main { main {
position: relative; position: relative;
@ -44,14 +54,4 @@
main :global(a) { main :global(a) {
color: rgb(0,0,150); color: rgb(0,0,150);
} }
</style> </style>
<svelte:window on:hashchange={hashchange}/>
<main>
{#if item}
<Item {item} returnTo="#/top/{page}"/>
{:else if page}
<List {page}/>
{/if}
</main>

26
site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
Unescape View File

@ -2,6 +2,18 @@
export let comment; export let comment;
</script> </script>
<article>
<p class="meta">{comment.user} {comment.time_ago}</p>
{@html comment.content}
<div class="replies">
{#each comment.comments as child}
<svelte:self comment={child}/>
{/each}
</div>
</article>
<style> <style>
article { article {
border-top: 1px solid #eee; border-top: 1px solid #eee;
@ -17,16 +29,4 @@
.replies { .replies {
padding: 0 0 0 1em; padding: 0 0 0 1em;
} }
</style> </style>
<article>
<p class="meta">{comment.user} {comment.time_ago}</p>
{@html comment.content}
<div class="replies">
{#each comment.comments as child}
<svelte:self comment={child}/>
{/each}
</div>
</article>

32
site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
Unescape View File

@ -7,22 +7,6 @@
$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url; $: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
</script> </script>
<style>
article {
margin: 0 0 1em 0;
}
a {
display: block;
margin: 0 0 1em 0;
}
h1 {
font-size: 1.4em;
margin: 0;
}
</style>
<a href={returnTo}>&laquo; back</a> <a href={returnTo}>&laquo; back</a>
<article> <article>
@ -41,3 +25,19 @@
<Comment {comment}/> <Comment {comment}/>
{/each} {/each}
</div> </div>
<style>
article {
margin: 0 0 1em 0;
}
a {
display: block;
margin: 0 0 1em 0;
}
h1 {
font-size: 1.4em;
margin: 0;
}
</style>

22
site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
Unescape View File

@ -18,6 +18,16 @@
}); });
</script> </script>
{#if items}
{#each items as item, i}
<Summary {item} {i} {offset}/>
{/each}
<a href="#/top/{page + 1}">page {page + 1}</a>
{:else}
<p class="loading">loading...</p>
{/if}
<style> <style>
a { a {
padding: 2em; padding: 2em;
@ -33,14 +43,4 @@
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }
</style> </style>
{#if items}
{#each items as item, i}
<Summary {item} {i} {offset}/>
{/each}
<a href="#/top/{page + 1}">page {page + 1}</a>
{:else}
<p class="loading">loading...</p>
{/if}

14
site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
Unescape View File

@ -11,6 +11,12 @@
$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url; $: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
</script> </script>
<article>
<span>{i + offset + 1}</span>
<h2><a target="_blank" href={url}>{item.title}</a></h2>
<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
</article>
<style> <style>
article { article {
position: relative; position: relative;
@ -31,10 +37,4 @@
a { a {
color: #333; color: #333;
} }
</style> </style>
<article>
<span>{i + offset + 1}</span>
<h2><a target="_blank" href={url}>{item.title}</a></h2>
<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
</article>

12
site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
Unescape View File

@ -14,15 +14,15 @@
}); });
</script> </script>
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>
<style> <style>
div { div {
cursor: pointer; cursor: pointer;
line-height: 1.5; line-height: 1.5;
} }
</style> </style>
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>

14
site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
Unescape View File

@ -12,15 +12,15 @@
}); });
</script> </script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever <!-- the text will flash red whenever
the `todo` object changes --> the `todo` object changes -->
<div bind:this={div} on:click> <div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text} {todo.done ? '👍': ''} {todo.text}
</div> </div>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>

6
site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
Unescape View File

@ -1,5 +1,5 @@
<p>This is a paragraph.</p>
<style> <style>
/* styles go here */ /* Write your CSS here */
</style> </style>
<p>This is a paragraph.</p>

4
site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
Unescape View File

@ -1,3 +1,5 @@
<p>This is a paragraph.</p>
<style> <style>
p { p {
color: purple; color: purple;
@ -5,5 +7,3 @@
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>This is a paragraph.</p>

6
site/content/tutorial/01-introduction/04-styling/text.md
Unescape View File

@ -5,6 +5,8 @@ title: Styling
Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element: Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
```html ```html
<p>This is a paragraph.</p>
<style> <style>
p { p {
color: purple; color: purple;
@ -12,8 +14,6 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>This is a paragraph.</p>
``` ```
Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step. Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.

4
site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
Unescape View File

@ -1,3 +1,5 @@
<p>This is a paragraph.</p>
<style> <style>
p { p {
color: purple; color: purple;
@ -5,5 +7,3 @@
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>This is a paragraph.</p>

2
site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
Unescape View File

@ -1 +1 @@
<p>This is another paragraph.</p> <p>This is another paragraph.</p>

6
site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
Unescape View File

@ -2,6 +2,9 @@
import Nested from './Nested.svelte'; import Nested from './Nested.svelte';
</script> </script>
<p>This is a paragraph.</p>
<Nested/>
<style> <style>
p { p {
color: purple; color: purple;
@ -9,6 +12,3 @@
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>This is a paragraph.</p>
<Nested/>

2
site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
Unescape View File

@ -1 +1 @@
<p>This is another paragraph.</p> <p>This is another paragraph.</p>

10
site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
Unescape View File

@ -7,10 +7,10 @@
} }
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div> <div>
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

10
site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
Unescape View File

@ -7,10 +7,10 @@
} }
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove={handleMousemove}> <div on:mousemove={handleMousemove}>
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

10
site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
Unescape View File

@ -7,10 +7,10 @@
} }
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove={handleMousemove}> <div on:mousemove={handleMousemove}>
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

10
site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
Unescape View File

@ -2,10 +2,10 @@
let m = { x: 0, y: 0 }; let m = { x: 0, y: 0 };
</script> </script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}"> <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
The mouse position is {m.x} x {m.y} The mouse position is {m.x} x {m.y}
</div> </div>
<style>
div { width: 100%; height: 100%; }
</style>

2
site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
Unescape View File

@ -2,7 +2,7 @@
import CustomButton from './CustomButton.svelte'; import CustomButton from './CustomButton.svelte';
function handleClick() { function handleClick() {
alert('clicked'); alert('Button Clicked');
} }
</script> </script>

34
site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
Unescape View File

@ -1,22 +1,22 @@
<button>
Click me
</button>
<style> <style>
button { button {
height: 4rem; background: #E2E8F0;
width: 8rem; color: #64748B;
background-color: #ddd; border: unset;
border-color: #ff3e00; border-radius: 6px;
color: #ff3e00; padding: .75rem 1.5rem;
font-size: 1.25rem; cursor: pointer;
background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
} }
button:hover { button:hover {
background-position: 0; background: #CBD5E1;
color: #ddd; color: #475569;
} }
</style> button:focus {
background: #94A3B8;
<button> color: #F1F5F9;
Click me }
</button> </style>

2
site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
Unescape View File

@ -2,7 +2,7 @@
import CustomButton from './CustomButton.svelte'; import CustomButton from './CustomButton.svelte';
function handleClick() { function handleClick() {
alert('clicked'); alert('Button Clicked');
} }
</script> </script>

34
site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
Unescape View File

@ -1,22 +1,22 @@
<button on:click>
Click me
</button>
<style> <style>
button { button {
height: 4rem; background: #E2E8F0;
width: 8rem; color: #64748B;
background-color: #ddd; border: unset;
border-color: #ff3e00; border-radius: 6px;
color: #ff3e00; padding: .75rem 1.5rem;
font-size: 1.25rem; cursor: pointer;
background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
} }
button:hover { button:hover {
background-position: 0; background: #CBD5E1;
color: #ddd; color: #475569;
} }
</style> button:focus {
background: #94A3B8;
<button on:click> color: #F1F5F9;
Click me }
</button> </style>

2
site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
Unescape View File

@ -51,4 +51,4 @@
You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)} of {join(flavours)}
</p> </p>
{/if} {/if}

2
site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
Unescape View File

@ -49,4 +49,4 @@
You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)} of {join(flavours)}
</p> </p>
{/if} {/if}

10
site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
Unescape View File

@ -3,10 +3,10 @@
let value = `Some words are *italic*, some are **bold**`; let value = `Some words are *italic*, some are **bold**`;
</script> </script>
<style>
textarea { width: 100%; height: 200px; }
</style>
<textarea value={value}></textarea> <textarea value={value}></textarea>
{@html marked(value)} {@html marked(value)}
<style>
textarea { width: 100%; height: 200px; }
</style>

10
site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
Unescape View File

@ -3,10 +3,10 @@
let value = `Some words are *italic*, some are **bold**`; let value = `Some words are *italic*, some are **bold**`;
</script> </script>
<style>
textarea { width: 100%; height: 200px; }
</style>
<textarea bind:value></textarea> <textarea bind:value></textarea>
{@html marked(value)} {@html marked(value)}
<style>
textarea { width: 100%; height: 200px; }
</style>

14
site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
Unescape View File

@ -14,10 +14,6 @@
} }
</script> </script>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>
<h2>Insecurity questions</h2> <h2>Insecurity questions</h2>
<form on:submit|preventDefault={handleSubmit}> <form on:submit|preventDefault={handleSubmit}>
@ -36,4 +32,12 @@
</button> </button>
</form> </form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p> <p>selected question {selected ? selected.id : '[waiting...]'}</p>
<style>
input {
display: block;
width: 500px;
max-width: 100%;
}
</style>

14
site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
Unescape View File

@ -14,10 +14,6 @@
} }
</script> </script>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>
<h2>Insecurity questions</h2> <h2>Insecurity questions</h2>
<form on:submit|preventDefault={handleSubmit}> <form on:submit|preventDefault={handleSubmit}>
@ -36,4 +32,12 @@
</button> </button>
</form> </form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p> <p>selected question {selected ? selected.id : '[waiting...]'}</p>
<style>
input {
display: block;
width: 500px;
max-width: 100%;
}
</style>

12
site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
Unescape View File

@ -16,12 +16,6 @@
$: remaining = todos.filter(t => !t.done).length; $: remaining = todos.filter(t => !t.done).length;
</script> </script>
<style>
.done {
opacity: 0.4;
}
</style>
<h1>Todos</h1> <h1>Todos</h1>
{#each todos as todo} {#each todos as todo}
@ -47,3 +41,9 @@
<button on:click={clear}> <button on:click={clear}>
Clear completed Clear completed
</button> </button>
<style>
.done {
opacity: 0.4;
}
</style>

12
site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
Unescape View File

@ -16,12 +16,6 @@
$: remaining = todos.filter(t => !t.done).length; $: remaining = todos.filter(t => !t.done).length;
</script> </script>
<style>
.done {
opacity: 0.4;
}
</style>
<h1>Todos</h1> <h1>Todos</h1>
{#each todos as todo} {#each todos as todo}
@ -47,3 +41,9 @@
<button on:click={clear}> <button on:click={clear}>
Clear completed Clear completed
</button> </button>
<style>
.done {
opacity: 0.4;
}
</style>

48
site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
Unescape View File

@ -51,6 +51,29 @@
} }
</script> </script>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}>
<track kind="captions">
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>
<style> <style>
div { div {
position: relative; position: relative;
@ -102,27 +125,4 @@
video { video {
width: 100%; width: 100%;
} }
</style> </style>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}>
<track kind="captions">
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>

54
site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
Unescape View File

@ -51,6 +51,32 @@
} }
</script> </script>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
bind:paused>
<track kind="captions">
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>
<style> <style>
div { div {
position: relative; position: relative;
@ -102,30 +128,4 @@
video { video {
width: 100%; width: 100%;
} }
</style> </style>
<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
<div>
<video
poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
on:mousemove={handleMousemove}
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
bind:paused>
<track kind="captions">
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
<progress value="{(time / duration) || 0}"/>
<div class="info">
<span class="time">{format(time)}</span>
<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
<span class="time">{format(duration)}</span>
</div>
</div>
</div>

14
site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
Unescape View File

@ -5,12 +5,6 @@
let text = 'edit me'; let text = 'edit me';
</script> </script>
<style>
input { display: block; }
div { display: inline-block; }
span { word-break: break-all; }
</style>
<input type=range bind:value={size}> <input type=range bind:value={size}>
<input bind:value={text}> <input bind:value={text}>
@ -18,4 +12,10 @@
<div> <div>
<span style="font-size: {size}px">{text}</span> <span style="font-size: {size}px">{text}</span>
</div> </div>
<style>
input { display: block; }
div { display: inline-block; }
span { word-break: break-all; }
</style>

14
site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
Unescape View File

@ -5,12 +5,6 @@
let text = 'edit me'; let text = 'edit me';
</script> </script>
<style>
input { display: block; }
div { display: inline-block; }
span { word-break: break-all; }
</style>
<input type=range bind:value={size}> <input type=range bind:value={size}>
<input bind:value={text}> <input bind:value={text}>
@ -18,4 +12,10 @@
<div bind:clientWidth={w} bind:clientHeight={h}> <div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span> <span style="font-size: {size}px">{text}</span>
</div> </div>
<style>
input { display: block; }
div { display: inline-block; }
span { word-break: break-all; }
</style>

12
site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
Unescape View File

@ -36,6 +36,11 @@
}); });
</script> </script>
<canvas
width={32}
height={32}
></canvas>
<style> <style>
canvas { canvas {
width: 100%; width: 100%;
@ -44,9 +49,4 @@
-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; -webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
} }
</style> </style>
<canvas
width={32}
height={32}
></canvas>

14
site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
Unescape View File

@ -36,6 +36,12 @@
}); });
</script> </script>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>
<style> <style>
canvas { canvas {
width: 100%; width: 100%;
@ -44,10 +50,4 @@
-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; -webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
} }
</style> </style>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>

28
site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
Unescape View File

@ -10,19 +10,6 @@
const submit = () => dispatch('submit'); const submit = () => dispatch('submit');
</script> </script>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>
<div class="keypad"> <div class="keypad">
<button on:click={select(1)}>1</button> <button on:click={select(1)}>1</button>
<button on:click={select(2)}>2</button> <button on:click={select(2)}>2</button>
@ -37,4 +24,17 @@
<button disabled={!value} on:click={clear}>clear</button> <button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</button> <button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button> <button disabled={!value} on:click={submit}>submit</button>
</div> </div>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>

28
site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
Unescape View File

@ -10,19 +10,6 @@
const submit = () => dispatch('submit'); const submit = () => dispatch('submit');
</script> </script>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>
<div class="keypad"> <div class="keypad">
<button on:click={select(1)}>1</button> <button on:click={select(1)}>1</button>
<button on:click={select(2)}>2</button> <button on:click={select(2)}>2</button>
@ -37,4 +24,17 @@
<button disabled={!value} on:click={clear}>clear</button> <button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</button> <button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button> <button disabled={!value} on:click={submit}>submit</button>
</div> </div>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em
}
button {
margin: 0
}
</style>

30
site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
Unescape View File

@ -2,20 +2,6 @@
let photos = []; let photos = [];
</script> </script>
<style>
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure, img {
width: 100%;
margin: 0;
}
</style>
<h1>Photo album</h1> <h1>Photo album</h1>
<div class="photos"> <div class="photos">
@ -28,4 +14,18 @@
<!-- this block renders when photos.length === 0 --> <!-- this block renders when photos.length === 0 -->
<p>loading...</p> <p>loading...</p>
{/each} {/each}
</div> </div>
<style>
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure, img {
width: 100%;
margin: 0;
}
</style>

30
site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
Unescape View File

@ -9,20 +9,6 @@
}); });
</script> </script>
<style>
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure, img {
width: 100%;
margin: 0;
}
</style>
<h1>Photo album</h1> <h1>Photo album</h1>
<div class="photos"> <div class="photos">
@ -35,4 +21,18 @@
<!-- this block renders when photos.length === 0 --> <!-- this block renders when photos.length === 0 -->
<p>loading...</p> <p>loading...</p>
{/each} {/each}
</div> </div>
<style>
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure, img {
width: 100%;
margin: 0;
}
</style>

16
site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
Unescape View File

@ -4,13 +4,6 @@
const progress = writable(0); const progress = writable(0);
</script> </script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress> <progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}"> <button on:click="{() => progress.set(0)}">
@ -31,4 +24,11 @@
<button on:click="{() => progress.set(1)}"> <button on:click="{() => progress.set(1)}">
100% 100%
</button> </button>
<style>
progress {
display: block;
width: 100%;
}
</style>

16
site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
Unescape View File

@ -8,13 +8,6 @@
}); });
</script> </script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress> <progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}"> <button on:click="{() => progress.set(0)}">
@ -35,4 +28,11 @@
<button on:click="{() => progress.set(1)}"> <button on:click="{() => progress.set(1)}">
100% 100%
</button> </button>
<style>
progress {
display: block;
width: 100%;
}
</style>

18
site/content/tutorial/09-motion/02-spring/app-a/App.svelte
Unescape View File

@ -5,11 +5,6 @@
let size = writable(10); let size = writable(10);
</script> </script>
<style>
svg { width: 100%; height: 100%; margin: -8px; }
circle { fill: #ff3e00 }
</style>
<div style="position: absolute; right: 1em;"> <div style="position: absolute; right: 1em;">
<label> <label>
<h3>stiffness ({coords.stiffness})</h3> <h3>stiffness ({coords.stiffness})</h3>
@ -28,4 +23,15 @@
on:mouseup="{() => size.set(10)}" on:mouseup="{() => size.set(10)}"
> >
<circle cx={$coords.x} cy={$coords.y} r={$size}/> <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg> </svg>
<style>
svg {
width: 100%;
height: 100%;
margin: -8px;
}
circle {
fill: #ff3e00;
}
</style>

17
site/content/tutorial/09-motion/02-spring/app-b/App.svelte
Unescape View File

@ -9,11 +9,6 @@
let size = spring(10); let size = spring(10);
</script> </script>
<style>
svg { width: 100%; height: 100% }
circle { fill: #ff3e00 }
</style>
<div style="position: absolute; right: 1em;"> <div style="position: absolute; right: 1em;">
<label> <label>
<h3>stiffness ({coords.stiffness})</h3> <h3>stiffness ({coords.stiffness})</h3>
@ -32,4 +27,14 @@
on:mouseup="{() => size.set(10)}" on:mouseup="{() => size.set(10)}"
> >
<circle cx={$coords.x} cy={$coords.y} r={$size}/> <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg> </svg>
<style>
svg {
width: 100%;
height: 100%;
}
circle {
fill: #ff3e00;
}
</style>

24
site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
Unescape View File

@ -11,6 +11,17 @@
} }
</script> </script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}
<style> <style>
.centered { .centered {
position: absolute; position: absolute;
@ -24,15 +35,4 @@
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
font-size: 4em; font-size: 4em;
} }
</style> </style>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}

24
site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
Unescape View File

@ -22,6 +22,17 @@
} }
</script> </script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}
<style> <style>
.centered { .centered {
position: absolute; position: absolute;
@ -35,15 +46,4 @@
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
font-size: 4em; font-size: 4em;
} }
</style> </style>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div class="centered" in:spin="{{duration: 8000}}" out:fade>
<span>transitions!</span>
</div>
{/if}

16
site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
Unescape View File

@ -6,13 +6,6 @@
let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']; let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
</script> </script>
<style>
div {
padding: 0.5em 0;
border-top: 1px solid #eee;
}
</style>
<label> <label>
<input type="checkbox" bind:checked={showItems}> <input type="checkbox" bind:checked={showItems}>
show list show list
@ -29,4 +22,11 @@
{item} {item}
</div> </div>
{/each} {/each}
{/if} {/if}
<style>
div {
padding: 0.5em 0;
border-top: 1px solid #eee;
}
</style>

16
site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
Unescape View File

@ -6,13 +6,6 @@
let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']; let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
</script> </script>
<style>
div {
padding: 0.5em 0;
border-top: 1px solid #eee;
}
</style>
<label> <label>
<input type="checkbox" bind:checked={showItems}> <input type="checkbox" bind:checked={showItems}>
show list show list
@ -29,4 +22,11 @@
{item} {item}
</div> </div>
{/each} {/each}
{/if} {/if}
<style>
div {
padding: 0.5em 0;
border-top: 1px solid #eee;
}
</style>

2
site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
Unescape View File

@ -145,4 +145,4 @@
label:hover button { label:hover button {
opacity: 1; opacity: 1;
} }
</style> </style>

2
site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
Unescape View File

@ -152,4 +152,4 @@
label:hover button { label:hover button {
opacity: 1; opacity: 1;
} }
</style> </style>

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save