page templates

<tc-block-settings>

A settings page with a section list on the left driving named content slots on the right.

import "@ra9/tan-compose-kit/blocks/settings"

Props

Name	Type	Default	Description
`title`	`string`	`"Settings"`	Page heading.
`description`	`string`	`"Manage your account and workspace preferences."`	Text under the heading.
`sections`	`Array<{ id, label, hint? }> (json)`	`[4 defaults]`	Left-hand navigation entries.
`active`	`string`	`first section id`	Id of the visible section. Reflects to the host attribute.

Events

Event	Detail	When
`tc-block-settings-change`	`{ active, previous }`	Fires when a section is activated.

Slots

Slot	Description
`(per section id)`	One named slot per section id; `<div slot="profile">…</div>` shows when `active === "profile"`.

CSS variables

Variable	Default	Description
`--tc-block-side-bg`	`var(--tc-color-surface, #ffffff)`	Section list background.
`--tc-block-side-fg`	`var(--tc-color-ink, #14171f)`	Section label color.
`--tc-block-side-soft`	`var(--tc-color-ink-soft, #4a5061)`	Inactive section / hint color.
`--tc-block-side-active-bg`	`var(--tc-color-accent-soft, #efe2cf)`	Active section background.
`--tc-block-surface`	`var(--tc-color-surface, #ffffff)`	Content panel background.
`--tc-block-rule`	`var(--tc-color-rule, #ece5d3)`	Border color.
`--tc-block-radius`	`var(--tc-radius-lg, 12px)`	Content panel corner radius.
`--tc-block-font`	`var(--tc-font-sans, …)`	Font family.

Examples

<tc-block-settings> is a vertical-tabs layout for preferences pages. Each section's content is a named slot, so the block stays presentation-only and your form controls live in the light DOM.

Basic usage

<tc-block-settings title="Settings" description="Manage your workspace." ></tc-block-settings>

import "@ra9/tan-compose-kit/blocks/settings"; const settings = document.querySelector("tc-block-settings"); settings.sections = [ { id: "profile", label: "Profile", hint: "Name and avatar" }, { id: "billing", label: "Billing", hint: "Plan and invoices" }, ];

Slotting sections

<tc-block-settings> <div slot="profile"> <tc-input label="Full name" name="name"></tc-input> </div> <div slot="billing"> <tc-select label="Plan" name="plan"></tc-select> </div> </tc-block-settings>

The blocks demo previews all five page templates with a switcher, including this one — with form controls slotted into each section.

← All components