Aside

Aside — вертикальная колонка рядом с основным содержимым: острова и карточки стоят в ней стопкой с одним зазором. Колонка задаёт семантику aside, ширину и ритм; содержимое, навигацию и порядок блоков задаёт страница. Это регион context каркаса приложения и колонки outline / summary редактора сущности, оформленные компонентом.

Статус: experimental · в системе с 2026-08 · интерактивность: none (нет)

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

Сводка сущности справа от полей: баланс, владелец, метки, привязанные объекты, комментарий.
Структура сущности слева: идентификатор со статусом и переход по секциям настройки.
Локальные сведения рядом с основным содержимым, не дублирующие глобальную навигацию.

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

Глобальная навигация продукта — это регион navigation каркаса, а не Aside.
Содержимое одной колонки без соседа — колонка контекста нужна только рядом с основным потоком.
Единственный блок — ему хватит Island или Card прямо в сетке страницы.

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

island — один блок без колонки
card — один именованный блок без колонки

Колонка сводки

Правая колонка s: остров баланса, остров владельца и карточка комментария стопкой.

<!--
  🟢

  Правая колонка сводки редактора сущности (`s`, 200px): остров баланса,
  остров владельца и карточка комментария стопкой с одним зазором колонки.
  Aside задаёт ширину и ритм, блоки тянутся на всю ширину колонки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Aside from "$lib/ui/Aside.svelte";
import Card from "$lib/ui/Card.svelte";
import Divider from "$lib/ui/Divider.svelte";
import Island from "$lib/ui/Island.svelte";
import Switch from "$lib/ui/Switch.svelte";

let autoTopup = $state(true);
</script>

<Aside size="s" label={t("Сводка кампании")}>
	<Island label={t("Баланс")}>
		<div style="display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);">
			<span style="display: flex; flex-direction: column; gap: var(--sp-0-5); min-width: 0;">
				<span style="font-size: var(--fs-xs); color: var(--c-text-muted);">Balance:</span>
				<strong style="font-size: var(--fs-m); font-weight: var(--fw-medium); line-height: var(--lh-solid);">$322.94</strong>
			</span>
		</div>
		<Divider />
		<Switch label="Auto top-up" bind:checked={autoTopup} />
	</Island>

	<Island label={t("Владелец")}>
		<span style="font-size: var(--fs-xs); color: var(--c-text-muted);">Owner</span>
		<span style="font-size: var(--fs-s);">john.doe@admy.io</span>
	</Island>

	<Card title="Comment">
		<span style="color: var(--c-text-muted); font-size: var(--fs-s);">Internal note, admins only</span>
	</Card>
</Aside>

Колонка структуры

Левая колонка m: остров с форматом, идентификатором и переключателем активности кампании.

<!--
  🟢

  Левая колонка структуры сущности (`m`, 260px): остров с форматом кампании,
  идентификатором и переключателем активности. Более широкая колонка держит
  идентификатор со статусом и пункты секций настройки.
-->

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

let active = $state(true);
</script>

<Aside size="m" label={t("Структура кампании")}>
	<Island label={t("Кампания")}>
		<span style="font-size: var(--fs-xs); color: var(--c-text-muted);">Push · CPC</span>
		<strong style="font-size: var(--fs-m); font-weight: var(--fw-medium);">Campaign #4821</strong>
		<Switch label={t("Active")} bind:checked={active} />
	</Island>
</Aside>