mirror of https://github.com/sveltejs/svelte
parent
ca0e5df0d8
commit
cc942e963c
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let indeterminate;
|
||||
</script>
|
||||
|
||||
<input type='checkbox' indeterminate='{indeterminate}'>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
{#each items as item, i}
|
||||
<div class='{item.foo ? "foo" : ""} {item.bar ? "bar" : ""}'>{i + 1}</div>
|
||||
{/each}
|
@ -1 +1,6 @@
|
||||
<script>
|
||||
export let inputType;
|
||||
export let inputValue;
|
||||
</script>
|
||||
|
||||
<input type='{inputType}' value='{inputValue}'>
|
Before Width: | Height: | Size: 40 B After Width: | Height: | Size: 77 B |
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<p data-value="{value}"></p>
|
||||
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<input type='radio' bind:group={foo} value='{false}'>
|
||||
<input type='radio' bind:group={foo} value='{true}'>
|
@ -1,2 +1,9 @@
|
||||
<script>
|
||||
export let t;
|
||||
export let d;
|
||||
export let paused;
|
||||
export let v;
|
||||
</script>
|
||||
|
||||
<audio bind:currentTime={t} bind:duration={d} bind:paused bind:volume={v}
|
||||
src='music.mp3'></audio>
|
@ -1,3 +1,8 @@
|
||||
<script>
|
||||
export let checked;
|
||||
export let indeterminate;
|
||||
</script>
|
||||
|
||||
<input type='checkbox' bind:checked bind:indeterminate>
|
||||
<p>checked? {checked}</p>
|
||||
<p>indeterminate? {indeterminate}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<input type='checkbox' bind:checked={foo}>
|
||||
<p>{foo}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let count;
|
||||
</script>
|
||||
|
||||
<input type='number' bind:value={count}>
|
||||
<p>{typeof count} {count}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let count;
|
||||
</script>
|
||||
|
||||
<input type='range' bind:value={count}>
|
||||
<p>{typeof count} {count}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let count;
|
||||
</script>
|
||||
|
||||
<input type='range' bind:value={count}>
|
||||
<p>{typeof count} {count}</p>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
{#each items as item}
|
||||
<div><input bind:value={item}><p>{item}</p></div>
|
||||
{/each}
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let component;
|
||||
</script>
|
||||
|
||||
<h1>Hello {component.name}!</h1>
|
||||
<input bind:value={component.name}/>
|
@ -1,2 +1,7 @@
|
||||
<script>
|
||||
export let obj;
|
||||
export let prop;
|
||||
</script>
|
||||
|
||||
<input bind:value={obj[prop]}>
|
||||
<pre>{JSON.stringify(obj)}</pre>
|
@ -1,2 +1,7 @@
|
||||
<script>
|
||||
export let user;
|
||||
export let prop;
|
||||
</script>
|
||||
|
||||
<input bind:value={user[prop]}>
|
||||
<p>hello {user.name}</p>
|
@ -1,3 +1,8 @@
|
||||
<script>
|
||||
export let objects;
|
||||
export let prop;
|
||||
</script>
|
||||
|
||||
{#each objects as obj}
|
||||
<input bind:value={obj[prop]}>
|
||||
<pre>{JSON.stringify(obj)}</pre>
|
||||
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
{#each items as item}
|
||||
<div><input bind:value={item.description}><p>{item.description}</p></div>
|
||||
{/each}
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let user;
|
||||
</script>
|
||||
|
||||
<input bind:value={user.name}>
|
||||
<p>hello {user.name}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<input bind:value={name}>
|
||||
<p>hello {name}</p>
|
@ -1 +1,6 @@
|
||||
<script>
|
||||
export let a;
|
||||
export let b;
|
||||
</script>
|
||||
|
||||
<input bind:value={a} on:input='{() => b = 0}'>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<textarea bind:value></textarea>
|
||||
<p>{value}</p>
|
@ -1,3 +1,8 @@
|
||||
<script>
|
||||
export let things;
|
||||
export let selected;
|
||||
</script>
|
||||
|
||||
{#each things as thing}
|
||||
<div class:selected="{selected === thing}"></div>
|
||||
{/each}
|
@ -1 +1,8 @@
|
||||
<script>
|
||||
export let myClass;
|
||||
export let foo;
|
||||
export let bar;
|
||||
export let unused;
|
||||
</script>
|
||||
|
||||
<div class={myClass} class:foo class:bar class:unused></div>
|
@ -1 +1,7 @@
|
||||
<script>
|
||||
export let foo;
|
||||
export let bar;
|
||||
export let unused;
|
||||
</script>
|
||||
|
||||
<div class:foo class:bar class:unused></div>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let myClass;
|
||||
</script>
|
||||
|
||||
<div class={myClass} class:three={true}></div>
|
@ -1,3 +1,8 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let field;
|
||||
</script>
|
||||
|
||||
<label>
|
||||
{field} <input bind:value>
|
||||
</label>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let code;
|
||||
</script>
|
||||
|
||||
<textarea bind:value={code}></textarea>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<input bind:value>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<input bind:value>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<span>{value.id}</span>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<input bind:value>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<button class='baz' on:click='{() => x = "r"}'>baz</button>
|
||||
<p>baz x: {x}</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let show;
|
||||
</script>
|
||||
|
||||
<button on:click="{() => show = false}">Hide</button>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let p;
|
||||
</script>
|
||||
|
||||
<p>{p}</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<p>foo: {foo}</p>
|
@ -1,3 +1,10 @@
|
||||
<script>
|
||||
export let foo;
|
||||
export let baz;
|
||||
export let qux;
|
||||
export let quux;
|
||||
</script>
|
||||
|
||||
<p>foo: {foo}</p>
|
||||
<p>baz: {baz} ({typeof baz})</p>
|
||||
<p>qux: {qux}</p>
|
||||
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<p>foo: '{foo}'</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let href;
|
||||
</script>
|
||||
|
||||
<a href={href}>link</a>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>x: {x} ({typeof x})</p>
|
@ -1,2 +1,7 @@
|
||||
<script>
|
||||
export let foo;
|
||||
export let baz;
|
||||
</script>
|
||||
|
||||
<p>foo: {foo}</p>
|
||||
<p>baz: {baz} ({typeof baz})</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let nested;
|
||||
</script>
|
||||
|
||||
<span>{nested}</span>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let address;
|
||||
</script>
|
||||
|
||||
<a href='mailto:{address}'>email</a>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
{#if foo}
|
||||
<slot></slot>
|
||||
{/if}
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<input bind:value>
|
@ -1 +1,6 @@
|
||||
<script>
|
||||
export let x;
|
||||
export let y;
|
||||
</script>
|
||||
|
||||
<div>{x} {y}</div>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let letters;
|
||||
</script>
|
||||
|
||||
{#each letters as letter (letter.id)}
|
||||
<div>{letter.char}</div>
|
||||
{/each}
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let width;
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={width}/>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<p>green {foo}</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<p>red {foo}</p>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let z;
|
||||
</script>
|
||||
|
||||
<p>bar</p>
|
||||
<input type='checkbox' bind:checked={z}>
|
@ -1,2 +1,6 @@
|
||||
<script>
|
||||
export let y;
|
||||
</script>
|
||||
|
||||
<p>foo</p>
|
||||
<input bind:value={y}>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
{#if x}
|
||||
<svelte:component this={null}/>
|
||||
{/if}
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>{x}, therefore Bar</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>{x}, therefore Foo</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>Bar {x}</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>Foo {x}</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>{x}, therefore Bar</p>
|
@ -1 +1,5 @@
|
||||
<script>
|
||||
export let x;
|
||||
</script>
|
||||
|
||||
<p>{x}, therefore Foo</p>
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
{#each foo.bar as bar}
|
||||
<input bind:value={bar}>
|
||||
{/each}
|
||||
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let animalPawsEntries;
|
||||
</script>
|
||||
|
||||
{#each animalPawsEntries as [, pawType]}
|
||||
<p>{pawType}</p>
|
||||
{/each}
|
||||
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let animalPawsEntries;
|
||||
</script>
|
||||
|
||||
{#each animalPawsEntries as [animal, pawType]}
|
||||
<p>{animal}: {pawType}</p>
|
||||
{/each}
|
||||
|
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export let animalPawsEntries;
|
||||
</script>
|
||||
|
||||
{#each animalPawsEntries as { animal, pawType } }
|
||||
<p>{animal}: {pawType}</p>
|
||||
{/each}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue