Decorators

Decorators are components which are automatically wrapped around each descendant layout and page individually.

Any component with a default slot can be a decorator.

Usage

<slot decorator={MyDecorator} />
<slot decorator={MyDecorator} />

Example

<!-- _FadeDecorator.svelte --> <script> import { fade } from "svelte/transition"; </script> <div transition:fade> <slot /> </div>
<!-- _FadeDecorator.svelte -->
<script>
  import { fade } from "svelte/transition";
</script>

<div transition:fade>
  <slot />
</div>
<!-- _layout.svelte --> <script> import FadeDecorator from "./_FadeDecorator.svelte"; </script> <slot decorator={FadeDecorator} />
<!-- _layout.svelte -->
<script>
  import FadeDecorator from "./_FadeDecorator.svelte";
</script>

<slot decorator={FadeDecorator} />

Decorators can be changed/disabled recursively on any layout or page.


Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.