mirror of https://github.com/sveltejs/svelte
Simon
4 years ago
commit
e925e38eb7
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
question: Are there any third-party resources?
|
||||||
|
---
|
||||||
|
|
||||||
|
Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
|
||||||
@ -1,18 +0,0 @@
|
|||||||
---
|
|
||||||
question: Are there any video courses?
|
|
||||||
---
|
|
||||||
|
|
||||||
Rich Harris, the creator of Svelte, taught a course:
|
|
||||||
|
|
||||||
- [Frontend Masters](https://frontendmasters.com/courses/svelte/)
|
|
||||||
|
|
||||||
There are also a number of third-party courses:
|
|
||||||
|
|
||||||
- [Egghead](https://egghead.io/browse/frameworks/svelte)
|
|
||||||
- [Udemy](https://www.udemy.com/courses/search/?q=sveltejs+svelte) (Note: Udemy frequently has discounts over 90%)
|
|
||||||
- [Pluralsight](https://www.pluralsight.com/search?q=svelte)
|
|
||||||
|
|
||||||
Finally, there are also YouTube channels and playlists that teach Svelte:
|
|
||||||
|
|
||||||
- [Svelte Master](https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA)
|
|
||||||
- [Svelte Tutorial for Beginners](https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) by The Net Ninja
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
question: Are there any books?
|
|
||||||
---
|
|
||||||
|
|
||||||
There are a few books:
|
|
||||||
|
|
||||||
- [Svelte Handbook](https://flaviocopes.com/page/svelte-handbook/) by Flavio Copes
|
|
||||||
- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/) by Alessandro Segala
|
|
||||||
- [Svelte and Sapper in Action](https://www.manning.com/books/svelte-and-sapper-in-action) by R. Mark Volkmann
|
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let bgOpacity = 0.5;
|
||||||
|
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||||
|
|
||||||
|
<p>This is a paragraph.</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-family: "Comic Sans MS", cursive;
|
||||||
|
background: rgba(255, 62, 0, var(--opacity));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let bgOpacity = 0.5;
|
||||||
|
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||||
|
|
||||||
|
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-family: "Comic Sans MS", cursive;
|
||||||
|
background: rgba(255, 62, 0, var(--opacity));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: Inline styles
|
||||||
|
---
|
||||||
|
|
||||||
|
Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
|
||||||
|
|
||||||
|
Add the following style attribute to the paragraph element:
|
||||||
|
`style="color: {color}; --opacity: {bgOpacity};"`
|
||||||
|
|
||||||
|
Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let bgOpacity = 0.5;
|
||||||
|
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||||
|
|
||||||
|
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-family: "Comic Sans MS", cursive;
|
||||||
|
background: rgba(255, 62, 0, var(--opacity));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let bgOpacity = 0.5;
|
||||||
|
$: color = bgOpacity < 0.6 ? "#000" : "#fff";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||||
|
|
||||||
|
<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-family: "Comic Sans MS", cursive;
|
||||||
|
background: rgba(255, 62, 0, var(--opacity));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
---
|
||||||
|
title: The style directive
|
||||||
|
---
|
||||||
|
|
||||||
|
Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
|
||||||
|
|
||||||
|
Change the style attribute of the paragraph to the following:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p
|
||||||
|
style:color
|
||||||
|
style:--opacity="{bgOpacity}"
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
|
||||||
|
|
||||||
|
Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Advanced styling"
|
||||||
|
}
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"title": "Classes"
|
|
||||||
}
|
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<slot/>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let prop
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot value={prop} />
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
let logs;
|
||||||
|
function log(value) {
|
||||||
|
logs.push(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
prop: 'a',
|
||||||
|
log
|
||||||
|
},
|
||||||
|
html: '<button></button>',
|
||||||
|
before_test() {
|
||||||
|
logs = [];
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
|
||||||
|
assert.deepEqual(logs, ['a']);
|
||||||
|
|
||||||
|
component.prop = 'b';
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
assert.deepEqual(logs, ['a', 'b']);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Outer from './Outer.svelte'
|
||||||
|
import Inner from './Inner.svelte'
|
||||||
|
|
||||||
|
export let prop
|
||||||
|
export let log;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Outer {prop} let:value>
|
||||||
|
<Inner><button on:click={() => { log(value); }} /></Inner>
|
||||||
|
</Outer>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<slot name="box1" />
|
||||||
|
<slot />
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>static dynamic</div>
|
||||||
|
<div>static dynamic</div>
|
||||||
|
<div>static dynamic</div>
|
||||||
|
`,
|
||||||
|
async test({ component, target, assert }) {
|
||||||
|
component.props = 'xxx';
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>static xxx</div>
|
||||||
|
<div>static xxx</div>
|
||||||
|
<div>static xxx</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script>
|
||||||
|
import Component from './Component.svelte';
|
||||||
|
export let props = "dynamic";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:fragment slot="box1">
|
||||||
|
{@const foo = "static"}
|
||||||
|
{@const bar = props}
|
||||||
|
<div>{foo} {bar}</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<svelte:fragment>
|
||||||
|
{@const foo = "static"}
|
||||||
|
{@const bar = props}
|
||||||
|
<div>{foo} {bar}</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
{@const foo = "static"}
|
||||||
|
{@const bar = props}
|
||||||
|
<div>{foo} {bar}</div>
|
||||||
|
</Component>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
export let things;
|
||||||
|
function foo() {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each things as thing (thing)}
|
||||||
|
<!-- some comment -->
|
||||||
|
<div animate:foo></div>
|
||||||
|
{/each}
|
||||||
Loading…
Reference in new issue