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

Fix order and format.

Browse Source
pull/6213/head
Babak F 5 years ago
parent c2b05886ed
commit bc9b72ceac
59 changed files with 727 additions and 714 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,3 +1,5 @@
<p>Styled!</p>
<style> <style>
p { p {
color: purple; color: purple;
@ -5,5 +7,3 @@
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>Styled!</p>

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

@ -2,6 +2,9 @@
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;
@ -9,6 +12,3 @@
font-size: 2em; font-size: 2em;
} }
</style> </style>
<p>These styles...</p>
<Nested/>

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

@ -7,10 +7,13 @@
} }
</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>

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

@ -2,10 +2,13 @@
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>

8
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;
@ -16,7 +20,3 @@
color: #aaa; color: #aaa;
} }
</style> </style>
<button on:click>
Click me
</button>

8
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>

8
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}>
@ -37,3 +33,7 @@
</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>

52
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;
@ -103,29 +129,3 @@
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>

10
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}>
@ -18,3 +13,8 @@
<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>

12
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%;
@ -47,9 +53,3 @@
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>

26
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>
@ -38,3 +25,16 @@
<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,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">
@ -36,3 +22,17 @@
<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>

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>

4
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>

14
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)}">
@ -36,3 +29,10 @@
<button on:click="{() => progress.set(1)}"> <button on:click="{() => progress.set(1)}">
100% 100%
</button> </button>
<style>
progress {
display: block;
width: 100%;
}
</style>

10
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>
@ -33,3 +28,8 @@
> >
<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>

22
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;
@ -36,14 +47,3 @@
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}

76
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;
@ -107,41 +145,3 @@
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>

58
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">
@ -104,3 +75,32 @@
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>

131
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;
@ -119,68 +185,3 @@
} }
} }
</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>

26
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
@ -60,3 +47,16 @@
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>

76
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'/>
@ -102,3 +64,41 @@
<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>

72
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;
@ -80,39 +116,3 @@
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>

18
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%;
@ -13,12 +22,3 @@
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>

64
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%;
@ -40,35 +72,3 @@
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">

20
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;
@ -39,13 +49,3 @@
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>

22
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'}"
@ -27,3 +16,14 @@
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>

12
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
@ -16,3 +10,9 @@
<div class:big> <div class:big>
some {big ? 'big' : 'small'} text some {big ? 'big' : 'small'} text
</div> </div>
<style>
.big {
font-size: 4em;
}
</style>

8
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;
@ -8,7 +12,3 @@
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
</style> </style>
<div class="box">
<slot></slot>
</div>

12
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;
@ -8,9 +14,3 @@
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
</style> </style>
<div class="box">
<slot>
<em>no content was provided</em>
</slot>
</div>

40
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;
@ -25,23 +45,3 @@
.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>

26
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}
@ -44,3 +31,16 @@
{/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>

12
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>

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

@ -3,6 +3,8 @@
$: 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;
@ -10,5 +12,3 @@
background-size: 1em 1em; background-size: 1em 1em;
} }
</style> </style>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>

32
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;
@ -34,19 +50,3 @@
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}

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

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

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

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

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

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

22
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;
@ -29,14 +40,3 @@
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>

24
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;
@ -23,15 +35,3 @@
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"
>

2
site/content/examples/17-special-elements/05-svelte-head/App.svelte
Unescape View File

@ -2,4 +2,4 @@
<link rel="stylesheet" href="tutorial/dark-theme.css"> <link rel="stylesheet" href="tutorial/dark-theme.css">
</svelte:head> </svelte:head>
<h1>Hello world!</h1> <h1>Hello, World!</h1>

14
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>
@ -50,3 +43,10 @@
{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>

34
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;
@ -71,20 +88,3 @@
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>

50
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;
@ -98,28 +123,3 @@ radius of the selected circle.
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}

20
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;
@ -45,13 +55,3 @@
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>

24
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;
@ -18,15 +30,3 @@
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>

20
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;
@ -34,13 +44,3 @@
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}

12
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;
@ -32,9 +38,3 @@
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>

4
site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
Unescape View File

@ -1,5 +1,3 @@
<svelte:options immutable/>
<script> <script>
import ImmutableTodo from './ImmutableTodo.svelte'; import ImmutableTodo from './ImmutableTodo.svelte';
import MutableTodo from './MutableTodo.svelte'; import MutableTodo from './MutableTodo.svelte';
@ -27,6 +25,8 @@
} }
</script> </script>
<svelte:options immutable/>
<h2>Immutable</h2> <h2>Immutable</h2>
{#each todos as todo} {#each todos as todo}
<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/> <ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>

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

@ -1,5 +1,3 @@
<svelte:options immutable/>
<script> <script>
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
import flash from './flash.js'; import flash from './flash.js';
@ -14,15 +12,17 @@
}); });
</script> </script>
<style> <svelte:options immutable/>
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>

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

@ -12,15 +12,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>

Write Preview
Loading…
Cancel
Save