Components Overview

Reference pages are ideal for outlining how things work in terse and clear terms. Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you’re documenting.

Further reading

• Read about reference in the Diátaxis framework

Structure

The following outlines the structure used for each component page.

Overview

The overview contain:

• Links to the source code and the ARIA design pattern
• A high-level description of the component
• An interactive example of the component
  • Use the controls to change the props and see how the component responds
  • View the source code of the example in the “Code” tab
• A list of the main features of the component

[Component]

View source ARIA design pattern Report an issue

[One sentence description].

Preview

Say Hello

Controls

Value:

Toggle Disabled (false)

Code

MyComponent.svelte

<script lang="ts">
    let { value, disabled } = $props();
</script>

<button
    class="rounded-xl border bg-transparent px-4 py-1"
    onclick={() => alert(`Hello ${value}`)}>Say Hello</button
    {disabled}
>

Features

• Amazing feature.

Usage

This explains the basic usage of the component. Particularly noting which components to use as children of the other components, and which props are required.

Here must is used to indicate a required and can is used to indicate something that is optional.

API

The API of each Svelte component is documented.

It starts my showing the HTML element that the component renders to. If there is another element the component can render to, it will be shown as well. Hover over the to see the condition when the other element is used.

[Component]

[Default]

|

[Other]

The [Component] component ...

Next, the props are documented, with their type, default value (or ”-” if there is none), and a description of it’s usage.

• * is shown next to a required prop.
• (bindable) is shown to indicate that the prop is bindable.
• (x) is shown next to group of props where one is required.

Props

• [name]:[type]
  • Lorem ipsum
• defaultProp:[type] = [value]
  • Lorem ipsum
• requiredProp:[type] *
  • Lorem ipsum
• bindableProp:[type] (bindable)
  • Lorem ipsum
• groupProp1:[type] (2)
  • Lorem ipsum
• groupProp2:[type] (1)
  • Lorem ipsum

Prop	Type	Default	Description
[name]	[type]	-	Lorem ipsum
defaultProp	[type]	[value]	Lorem ipsum
requiredProp *	[type]	-	Lorem ipsum
bindableProp	[type] (bindable)	-	Lorem ipsum
groupProp1 (1)	[type]	-	Lorem ipsum
groupProp2 (1)	[type]	-	Lorem ipsum

(1)- One of groupProp1 groupProp2 is required.

All data attributes are documented in the same way as props.

• The icon is shown next to an attribute (always prefixed with svelte-runia-) used for the functioning of the component.
  • These attributes should not be used.

Data attributes

• data-[name]: [values]
  • Lorem ipsum
• data-svelte-runia-[name]: [values]
  • Lorem ipsum

Attribute	Values	Description
[data-[name]]	[values]	Lorem ipsum
[data-svelte-runia-[name]]	[values]	Lorem ipsum

Accessibility

An important aspect of accessibility is keyboard navigation. All keyboard interactions handled by the component are documented.

When multiple keys are described, they are separated by a ”/“. Many keyboard interactions require a condition to be met , such as an element being focussed on, before the action is performed.

Keyboard interactions

• [key] :

  Lorem ipsum

• [key1]/[key2] :

  Lorem ipsum

• [key] :

  Lorem ipsum

Keys	Condition	Action
[key]	-	Lorem ipsum
[key1] / [key2]	-	Lorem ipsum
[key]	[condition]	Lorem ipsum

Any other events (not onkeydown) are also documented.

Other events

• [Component]. [event] :

  Lorem ipsum

Component	Event	Action
[Component]	[event]	Lorem ipsum

Lastly, all ARIA attributes used to comply with the ARIA design pattern are documented. These are grouped by the component they are applied to. The description describes when the attribute is used and what value it will have.

ARIA attributes

• aria-[name]: [type]
  • Lorem ipsum

Attribute	Type	Description
aria-[name]	[type]	Lorem ipsum

Examples

At the bottom of the page, there are examples of tasks you might want to accomplish with the component.

These contain code snippets, marking the relevant parts of the code. A preview of the component, using the code snippets, is shown in the “Preview” tab.

Hello World Example

Code

<p>Hello World!</p>

Preview

Hello World!