@ -6,8 +6,9 @@ You can use curly braces to control element attributes, just like you use them t
Our image is missing a `src` attribute — let's add one:
Our image is missing a `src` attribute — let's add one:
<!-- prettier-ignore -->
```svelte
```svelte
<imgsrc={src}>
<imgsrc={src}/>
```
```
That's better. But Svelte is giving us a warning:
That's better. But Svelte is giving us a warning:
@ -18,8 +19,9 @@ When building web apps, it's important to make sure that they're _accessible_ to
In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
<!-- prettier-ignore -->
```svelte
```svelte
<imgsrc={src}alt="A man dances.">
<imgsrc={src}alt="A man dances."/>
```
```
We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
@ -29,5 +31,5 @@ We can use curly braces _inside_ attributes. Try changing it to `"{name} dances.
It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
@ -7,7 +7,5 @@ Event forwarding works for DOM events too.
We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value` to create a two-way binding between the `<textarea>` content and the `value` variable:
The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value` to create a two-way binding between the `<textarea>` content and the `value` variable:
```svelte
```svelte
<textareabind:value={value}></textarea>
<textareabind:value/>
```
```
In cases like these, where the names match, we can also use a shorthand form:
In cases like these, where the names match, we can also use a shorthand form:
@ -10,8 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
```svelte
```svelte
<canvas
<canvasbind:this={canvas}width={32}height={32}/>
bind:this={canvas}
width={32}
height={32}
></canvas>
```
```
Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
@ -14,9 +14,7 @@ Transition functions can accept parameters. Replace the `fade` transition with `
...and apply it to the `<p>` along with some options:
...and apply it to the `<p>` along with some options:
```svelte
```svelte
<ptransition:fly="{{ y: 200, duration: 2000 }}">
<ptransition:fly={{y:200,duration:2000}}>Flies in and out</p>
Flies in and out
</p>
```
```
Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
@ -40,7 +38,7 @@ export function clickOutside(node) {
Puru Vijay
4 years ago
