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

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

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

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

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

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

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

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

@ -2,10 +2,13 @@
let m = { x: 0, y: 0 };
</script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
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>
button {
height: 4rem;
@ -15,8 +19,4 @@
background-position: 0;
color: #aaa;
}
</style>
<button on:click>
Click me
</button>
</style>

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**`;
</script>
<style>
textarea { width: 100%; height: 200px; }
</style>
<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>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>
<h2>Insecurity questions</h2>
<form on:submit|preventDefault={handleSubmit}>
@ -36,4 +32,8 @@
</button>
</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>
<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>
div {
position: relative;
@ -102,30 +128,4 @@
video {
width: 100%;
}
</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>
</style>

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

@ -5,11 +5,6 @@
let text = 'edit me';
</script>
<style>
input { display: block; }
div { display: inline-block; }
</style>
<input type=range bind:value={size}>
<input bind:value={text}>
@ -17,4 +12,9 @@
<div bind:clientWidth={w} bind:clientHeight={h}>
<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>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>
<style>
canvas {
width: 100%;
@ -46,10 +52,4 @@
-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
}
</style>
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>
</style>

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

@ -10,19 +10,6 @@
const submit = () => dispatch('submit');
</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">
<button on:click={select(1)}>1</button>
<button on:click={select(2)}>2</button>
@ -37,4 +24,17 @@
<button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</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>
<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>
.photos {
width: 100%;
@ -22,17 +36,3 @@
margin: 0;
}
</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>
<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>
.chat {
display: flex;
@ -90,17 +104,3 @@
border-radius: 1em 1em 0 1em;
}
</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>
<textarea value={text} on:keydown={handleKeydown}></textarea>
<style>
textarea {
width: 100%;
height: 200px;
}
</style>
<textarea value={text} on:keydown={handleKeydown}></textarea>
</style>

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

@ -8,13 +8,6 @@
});
</script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}">
@ -35,4 +28,11 @@
<button on:click="{() => progress.set(1)}">
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);
</script>
<style>
svg { width: 100%; height: 100%; margin: -8px }
circle { fill: #ff3e00 }
</style>
<div style="position: absolute; right: 1em;">
<label>
<h3>stiffness ({coords.stiffness})</h3>
@ -32,4 +27,9 @@
on:mouseup="{() => size.set(10)}"
>
<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>
<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>
.centered {
position: absolute;
@ -35,15 +46,4 @@
transform: translate(-50%,-50%);
font-size: 4em;
}
</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}
</style>

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

@ -46,6 +46,44 @@
}
</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>
.new-todo {
font-size: 1.4em;
@ -106,42 +144,4 @@
label:hover button {
opacity: 1;
}
</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>
</style>

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

@ -37,35 +37,6 @@
$: current && runAnimations();
</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">
<svg viewBox="0 0 1400 1802">
<g class="canvas">
@ -103,4 +74,33 @@
bind:current_type
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;
</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>
.easing-sidebar {
width: 11em;
@ -118,69 +184,4 @@
margin-right: 10px;
}
}
</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>
</style>

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

@ -2,19 +2,6 @@
export let x, y;
</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" />
<rect
@ -59,4 +46,17 @@
stroke=#999
fill=none
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>
<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'>
<circle class='clock-face' r='48'/>
@ -101,4 +63,42 @@
<line class='second' y1='10' y2='-38'/>
<line class='second-counterweight' y1='10' y2='2'/>
</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;
</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>
h2 {
text-align: center;
@ -79,40 +115,4 @@
stroke: none;
opacity: 0.65;
}
</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>
</style>

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

@ -108,4 +108,4 @@
.path-area {
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';
</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>
.chart {
width: 100%;
@ -12,13 +21,4 @@
max-height: 480px;
margin: 0 auto;
}
</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>
</style>

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

@ -92,4 +92,4 @@
.y-axis text {
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;
</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>
svg {
width: 100%;
@ -39,36 +71,4 @@
.centered span {
will-change: filter;
}
</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">
</style>

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

@ -25,6 +25,16 @@
}
</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>
.box {
--width: 100px;
@ -38,14 +48,4 @@
background-color: #ff3e00;
cursor: move;
}
</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>
</style>

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

@ -2,17 +2,6 @@
let current = 'foo';
</script>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<button
class:active="{current === 'foo'}"
on:click="{() => current = 'foo'}"
@ -26,4 +15,15 @@
<button
class:active="{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;
</script>
<style>
.big {
font-size: 4em;
}
</style>
<label>
<input type=checkbox bind:checked={big}>
big
@ -15,4 +9,10 @@
<div class:big>
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>
.box {
width: 300px;
@ -7,8 +11,4 @@
padding: 1em;
margin: 0 0 1em 0;
}
</style>
<div class="box">
<slot></slot>
</div>
</style>

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

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>
.contact-card {
width: 300px;
@ -24,24 +44,4 @@
.address { background-image: url(tutorial/icons/map-marker.svg) }
.email { background-image: url(tutorial/icons/email.svg) }
.missing { color: #999 }
</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>
</style>

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

@ -2,19 +2,6 @@
import Hoverable from './Hoverable.svelte';
</script>
<style>
div {
padding: 1em;
margin: 0 0 1em 0;
background-color: #eee;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
@ -43,4 +30,17 @@
<p>Hover over me!</p>
{/if}
</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>
<div>Name</div>
<slot name="name" />
@ -22,3 +10,15 @@
<slot name="phone" />
{/if}
</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 {
display: block;
}
</style>
</style>

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

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

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);
</script>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
<style>
span {
padding: 0 0 0 1.5em;
background: 0 0.1em no-repeat;
background-size: 1em 1em;
}
</style>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
</style>

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

@ -10,6 +10,22 @@
}
</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>
span {
padding: 0 0 0 1.5em;
@ -33,20 +49,4 @@
li {
padding: 0.2em 0;
}
</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}
</style>

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

@ -1,5 +1,7 @@
<style>
strong { color: blue; }
</style>
<strong>Blue thing</strong>
<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 { color: green; }
</style>
<strong>Green thing</strong>
<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 { color: red; }
</style>
<strong>Red thing</strong>
<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>
<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>
div {
display: flex;
@ -28,15 +39,4 @@
border-bottom: 5px solid rgba(0,0,0,0.2);
color: #555;
}
</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>
</style>

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

@ -85,4 +85,4 @@
padding: 0;
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;
</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>
img {
position: absolute;
@ -22,16 +34,4 @@
:global(body) {
overflow: hidden;
}
</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"
>
</style>

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">
</svelte:head>
<h1>Hello world!</h1>
<h1>Hello, World!</h1>

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

@ -31,13 +31,6 @@
}
</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}>
<h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p>
@ -49,4 +42,11 @@
controls
{src}
></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>
let c = 0;
let f = 32;
@ -22,3 +12,13 @@
c =+(5 / 9 * (f - 32)).toFixed(1);
}
</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>
<style>
select, input, button {
display: block;
margin: 0.5em 0;
font-size: inherit;
}
</style>
<select bind:value={isReturn}>
<option value={false}>one-way flight</option>
<option value={true}>return flight</option>
@ -57,3 +49,11 @@
on:click={bookFlight}
disabled="{isReturn && (startDate >= endDate)}"
>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>
<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>
* {
font-family: inherit;
@ -70,21 +87,4 @@
.buttons {
clear: both;
}
</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>
</style>

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

@ -65,6 +65,31 @@ radius of the selected circle.
}
</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>
.controls {
position: absolute;
@ -97,29 +122,4 @@ radius of the selected circle.
input[type='range'] {
width: 100%;
}
</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}
</style>

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

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

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

@ -2,6 +2,18 @@
export let comment;
</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>
article {
border-top: 1px solid #eee;
@ -17,16 +29,4 @@
.replies {
padding: 0 0 0 1em;
}
</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>
</style>

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;
</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>
<article>
@ -41,3 +25,19 @@
<Comment {comment}/>
{/each}
</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>
{#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>
a {
padding: 2em;
@ -33,14 +43,4 @@
from { opacity: 0; }
to { opacity: 1; }
}
</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}
</style>

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;
</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>
article {
position: relative;
@ -31,10 +37,4 @@
a {
color: #333;
}
</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>
</style>

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

@ -1,5 +1,3 @@
<svelte:options immutable/>
<script>
import ImmutableTodo from './ImmutableTodo.svelte';
import MutableTodo from './MutableTodo.svelte';
@ -27,6 +25,8 @@
}
</script>
<svelte:options immutable/>
<h2>Immutable</h2>
{#each todos as todo}
<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>
import { afterUpdate } from 'svelte';
import flash from './flash.js';
@ -14,15 +12,17 @@
});
</script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<svelte:options immutable/>
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>

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

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