TableOfContents
Auto-generated table of contents from headings
Introduction
Overview of the project and its goals.
Getting Started
Installation steps and initial setup guide.
Prerequisites
Required tools and dependencies.
Installation
Step-by-step installation instructions.
Configuration
Configuring the project for your environment.
Accessibility
- Use concise, descriptive labels so navigation items are understandable when announced out of context.
- Preserve the expected keyboard model and expose current or selected state where relevant.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { TableOfContents } from '@dryui/ui';
</script>
<TableOfContents.Root>
<TableOfContents.List>...</TableOfContents.List>
<TableOfContents.Item>...</TableOfContents.Item>
</TableOfContents.Root>Import options
Root package
ts
import { TableOfContents } from '@dryui/ui'Per-component subpath
ts
import { TableOfContents } from '@dryui/ui/table-of-contents'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
TableOfContents.Root | |||||
| selector | string | — | 'main' | — | — |
| headingSelector | string | — | 'h2 | — | — |
| rootMargin | string | — | '0px 0px -80% 0px' | — | — |
| autoId | boolean | — | true | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
TableOfContents.List | |||||
TableOfContents.Item | |||||
| heading | import('./context.svelte.js').TocHeading | — | — | ✓ | — |
| children | Snippet<[{ heading: import('./context.svelte.js').TocHeading; active: boolean }]> | Content rendered inside the component. | — | — | — |