Toc | tcpsystems/ui

Examples

Page sections

Overview

Deploy the gateway after checks pass.

Health checks

Wait for all replicas to report ready.

Page sections.svelte

<script lang="ts">
	import Toc from '@tcpsystems/ui/foundation/Toc';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<Toc items={[
		{ label: 'Overview', href: `#${uid}-overview`, current: true },
		{ label: 'Health checks', href: `#${uid}-health` }
	]} />
	<section id={`${uid}-overview`}><h3>Overview</h3><p>Deploy the gateway after checks pass.</p></section>
	<section id={`${uid}-health`}><h3>Health checks</h3><p>Wait for all replicas to report ready.</p></section>
</Stack>

Mobile with nested sections

Deployment guide

Overview

Deploy the gateway after checks pass.

Health checks

Wait for all replicas to report ready.

Mobile with nested sections.svelte

<script lang="ts">
	import Toc from '@tcpsystems/ui/foundation/Toc';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<Toc mobile title="Deployment guide" items={[
		{ label: 'Overview', href: `#${uid}-overview`, current: true },
		{ label: 'Health checks', href: `#${uid}-health`, depth: 1 }
	]} />
	<section id={`${uid}-overview`}><h3>Overview</h3><p>Deploy the gateway after checks pass.</p></section>
	<section id={`${uid}-health`}><h3>Health checks</h3><p>Wait for all replicas to report ready.</p></section>
</Stack>

API

Import

import Toc from '@tcpsystems/ui/foundation/Toc';

Prop	Type	Default
`mode?`	`'toc' \| 'anchors'`	`'toc'`
`items?`	`Item[]`	`[]`
`title?`	`string`	`'On this page'`
`label?`	`string`	none
`mobile?`	`boolean`	`false`

Hook	Kind
`.tcp-anchor-nav`	Root class