docs: add crosslinks (#17663)

pull/17653/head
Rich Harris 8 months ago committed by GitHub
parent 67c4a38117
commit f09785424b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -1,5 +1,6 @@
--- ---
title: $state title: $state
tags: rune-state
--- ---
The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes. The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.

@ -1,5 +1,6 @@
--- ---
title: $derived title: $derived
tags: rune-derived
--- ---
Derived state is declared with the `$derived` rune: Derived state is declared with the `$derived` rune:

@ -1,5 +1,6 @@
--- ---
title: $effect title: $effect
tags: rune-effect
--- ---
Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering. Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.

@ -1,5 +1,6 @@
--- ---
title: $props title: $props
tags: rune-props
--- ---
The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements: The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:

@ -1,5 +1,6 @@
--- ---
title: $inspect title: $inspect
tags: rune-inspect
--- ---
> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop. > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.

@ -1,5 +1,6 @@
--- ---
title: {#if ...} title: {#if ...}
tags: template-if
--- ---
```svelte ```svelte

@ -1,5 +1,6 @@
--- ---
title: {#each ...} title: {#each ...}
tags: template-each
--- ---
```svelte ```svelte

@ -1,5 +1,6 @@
--- ---
title: {#key ...} title: {#key ...}
tags: template-key
--- ---
```svelte ```svelte

@ -1,5 +1,6 @@
--- ---
title: {#await ...} title: {#await ...}
tags: template-await
--- ---
```svelte ```svelte

@ -1,5 +1,6 @@
--- ---
title: {@html ...} title: {@html ...}
tags: template-html
--- ---
To inject raw HTML into your component, use the `{@html ...}` tag: To inject raw HTML into your component, use the `{@html ...}` tag:

@ -1,5 +1,6 @@
--- ---
title: {@attach ...} title: {@attach ...}
tags: attachments
--- ---
Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates. Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.

@ -1,5 +1,6 @@
--- ---
title: transition: title: transition:
tags: transitions
--- ---
A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change. A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.

@ -1,5 +1,6 @@
--- ---
title: in: and out: title: in: and out:
tags: transitions
--- ---
The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch. The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.

@ -1,5 +1,6 @@
--- ---
title: style: title: style:
tags: template-style
--- ---
The `style:` directive provides a shorthand for setting multiple styles on an element. The `style:` directive provides a shorthand for setting multiple styles on an element.

@ -1,5 +1,6 @@
--- ---
title: class title: class
tags: template-style
--- ---
There are two ways to set classes on elements: the `class` attribute, and the `class:` directive. There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.

@ -1,5 +1,6 @@
--- ---
title: Scoped styles title: Scoped styles
tags: styles-scoped
--- ---
Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question. Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.

@ -1,5 +1,6 @@
--- ---
title: Global styles title: Global styles
tags: styles-global
--- ---
## :global(...) ## :global(...)

@ -1,5 +1,6 @@
--- ---
title: Custom properties title: Custom properties
tags: styles-custom-properties
--- ---
You can pass CSS custom properties — both static and dynamic — to components: You can pass CSS custom properties — both static and dynamic — to components:

@ -1,5 +1,6 @@
--- ---
title: svelte/attachments title: svelte/attachments
tags: attachments
--- ---
> MODULE: svelte/attachments > MODULE: svelte/attachments

@ -1,5 +1,6 @@
--- ---
title: svelte/transition title: svelte/transition
tags: transitions
--- ---
> MODULE: svelte/transition > MODULE: svelte/transition

Loading…
Cancel
Save