Tabs

Tabs держит короткий набор разделов видимым и показывает одну связанную панель без перехода на другую страницу.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Несколько равноправных представлений делят один контекст и место на экране.
Пользователь часто переключается между разделами и должен видеть доступные варианты.

Не использовать:

Разделы являются отдельными страницами с собственными адресами — используй Link.
Контент вторичен и раскрывается независимо — используй Accordion.
Выбор меняет режим данных, а не панель содержимого — используй Segmented Control.

Альтернативы:

accordion — Accordion независимо раскрывает вторичный контент, а Tabs выбирает одну равноправную панель.
segmented-control — Segmented Control меняет режим представления и не создаёт tabpanel.
link — Link нужен, когда каждому разделу соответствует отдельный адрес.

Автоматическая активация

Стрелки сразу переключают активную панель.

Основные показатели кампании.

<!--
  🟢

  Базовый пример Tabs показывает две равноправные панели настроек. Автоматический
  режим меняет выбранную панель вместе с перемещением клавиатурного фокуса.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Tabs from "$lib/ui/Tabs.svelte";

const items = [
	{ value: "summary", label: t("Сводка") },
	{ value: "history", label: t("История") },
];
</script>

<Tabs {items}>
	{#snippet content(item)}
		{#if item.value === "summary"}
			<p>{t("Основные показатели кампании.")}</p>
		{:else}
			<p>{t("Последние изменения кампании.")}</p>
		{/if}
	{/snippet}
</Tabs>

Ручная активация

Стрелки перемещают фокус, Enter или Space подтверждает выбор.

Открыта панель «Правила».

<!--
  🟢

  Пример manual-режима отделяет перемещение фокуса от смены панели. Выбор
  подтверждается отдельно, поэтому просмотр подписей не меняет текущий раздел.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Tabs from "$lib/ui/Tabs.svelte";

const items = [
	{ value: "rules", label: t("Правила") },
	{ value: "examples", label: t("Примеры") },
	{ value: "changes", label: t("Изменения") },
];
</script>

<Tabs {items} activationMode="manual">
	{#snippet content(item)}
		<p>{t("Открыта панель «")}{item.label}».</p>
	{/snippet}
</Tabs>

Вкладки со значками

Значок слева от подписи и вкладка только со значком.

Основные показатели кампании.

<!--
  🟢

  Вкладки со значками: значок слева от подписи, а последняя вкладка — только
  значок с доступным именем. Значок передаётся как snippet в поле icon вкладки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ChartBar from "phosphor-svelte/lib/ChartBar";
import ClockCounterClockwise from "phosphor-svelte/lib/ClockCounterClockwise";
import Gear from "phosphor-svelte/lib/Gear";
import Tabs from "$lib/ui/Tabs.svelte";

const items = [
	{ value: "summary", label: t("Сводка"), icon: chartIcon },
	{ value: "history", label: t("История"), icon: historyIcon },
	{ value: "settings", label: "", ariaLabel: t("Настройки"), icon: gearIcon },
];
</script>

{#snippet chartIcon()}<ChartBar weight="bold" />{/snippet}
{#snippet historyIcon()}<ClockCounterClockwise weight="bold" />{/snippet}
{#snippet gearIcon()}<Gear weight="bold" />{/snippet}

<Tabs {items}>
	{#snippet content(item)}
		{#if item.value === "summary"}
			<p>{t("Основные показатели кампании.")}</p>
		{:else if item.value === "history"}
			<p>{t("Последние изменения кампании.")}</p>
		{:else}
			<p>{t("Параметры показа кампании.")}</p>
		{/if}
	{/snippet}
</Tabs>