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

docs: tweaks

Browse Source
pull/13209/head
Simon Holthausen 2 months ago
parent 363f4a06c8
commit 36137e0e93
3 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File

3
documentation/docs/02-template-syntax/06-transitions-and-animations.md
Unescape View File

@ -102,6 +102,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
```svelte
<!--- file: App.svelte --->
<script>
import { elasticOut } from 'svelte/easing';
@ -345,6 +346,7 @@ The function is called repeatedly _before_ the animation begins, with different
<!-- TODO: Types -->
```svelte
<!--- file: App.svelte --->
<script>
import { cubicOut } from 'svelte/easing';
@ -378,6 +380,7 @@ A custom animation function can also return a `tick` function, which is called _
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
```svelte
<!--- file: App.svelte --->
<script>
import { cubicOut } from 'svelte/easing';

22
documentation/docs/02-template-syntax/09-special-elements.md
Unescape View File

@ -14,8 +14,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
```svelte
<script>
/** @type {number} */
export let count;
let { count } = $props();
</script>
{#if count > 0}
@ -56,12 +55,12 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
```svelte
<script>
let tag = 'div';
let { handler } = $props();
export let handler;
let tag = $state('div');
</script>
<svelte:element this={tag} on:click={handler}>Foo</svelte:element>
<svelte:element this={tag} onclick={handler}>Foo</svelte:element>
```
Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
@ -73,7 +72,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
## `<svelte:window>`
```svelte
<svelte:window on:event={handler} />
<svelte:window onevent={handler} />
```
```svelte
@ -86,13 +85,12 @@ Unlike `<svelte:self>`, this element may only appear at the top level of your co
```svelte
<script>
/** @param {KeyboardEvent} event */
function handleKeydown(event) {
alert(`pressed the ${event.key} key`);
}
</script>
<svelte:window on:keydown={handleKeydown} />
<svelte:window onkeydown={handleKeydown} />
```
You can also bind to the following properties:
@ -117,7 +115,7 @@ All except `scrollX` and `scrollY` are readonly.
## `<svelte:document>`
```svelte
<svelte:document on:event={handler} />
<svelte:document onevent={handler} />
```
```svelte
@ -129,7 +127,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
```svelte
<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction />
<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
```
You can also bind to the following properties:
@ -144,7 +142,7 @@ All are readonly.
## `<svelte:body>`
```svelte
<svelte:body on:event={handler} />
<svelte:body onevent={handler} />
```
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
@ -152,7 +150,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
```svelte
<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} use:someAction />
<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
```
## `<svelte:head>`

6
documentation/docs/05-misc/03-typescript.md
Unescape View File

@ -118,7 +118,7 @@ Components can declare a generic relationship between their properties. One exam
select: Item;
}
let { items, select } = $props();
let { items, select }: Props = $props();
</script>
{#each items as item}
@ -210,8 +210,8 @@ declare namespace svelteHTML {
}
// enhance attributes
interface HTMLAttributes<T> {
// If you want to use on:beforeinstallprompt
'on:beforeinstallprompt'?: (event: any) => any;
// If you want to use the beforeinstallprompt event
'onbeforeinstallprompt'?: (event: any) => any;
// If you want to use myCustomAttribute={..} (note: all lowercase)
mycustomattribute?: any; // You can replace any with something more specific if you like
}

Write Preview
Loading…
Cancel
Save