Add Component Variants
To easily mock a component in a variety of states with type safety you can create multiple variants of a component simply by adding a sibling file using a component’s filename and replacing the the .svelte
extension with variants.ts
. See [SearchResult] for an example with several different variants.
Here is an example of a Header.svelte
component’s variants file:
Header.variants.tsts
import type { Variants } from 'kitbook';import type Component from './Header.svelte';export const variants: Variants<Component> = [{name: 'Desktop',description: 'Write something about this example if desired.',width: 800,height: 600,props: {activeURL: "/",githubURL: "/",},slots: [{content: 'My Workbench'}],},]
+page.svelte
files are actually just plain Svelte components with a very important data
prop. You can create a variants file for them as well but replace +
with _
(_page.variants.ts
) because +
is reserved for SvelteKit files:
_page.variants.tsts
import type { Variants } from 'kitbook';import type Component from './+page.svelte';export const variants: Variants<Component> = [{name: 'First',description: 'Foo',props: {data: {// place data props here},},},]