PageHeader

PageHeader открывает страницу титульным блоком: заголовок title с опциональной стрелкой возврата слева, под ним — необязательное описание description. Справа — ряд главных действий в snippet actions; действия стоят по нижней линии блока (align-self: flex-end). Заголовок переносится, а не обрезается; интерактивна строка только при наличии возврата или действий.

Статус: draft · в системе с 2026-08 · интерактивность: conditional (по конфигурации)

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

Шапка страницы или раздела внутри оболочки: заголовок плюс главные действия справа.
Вложенный экран с возвратом к родителю: стрелка back слева от заголовка.
Титульная строка редактора сущности: имя сущности и кнопки «Сохранить»/«Отмена».

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

Навигационная цепочка уровней — это Breadcrumbs над заголовком, а не сам заголовок.
Панель инструментов над контентом без заголовка страницы — это Toolbar.
Модальный заголовок с close — это шапка Dialog, а не PageHeader.

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

breadcrumbs — путь к странице по уровням, а не её заголовок
toolbar — ряд инструментов без титульного заголовка

Заголовок и описание

Заголовок страницы и описание под ним без действий.

<!--
  🟢

  Заголовок и описание страницы без действий: заголовок 32 и описание одной
  строкой под ним. Без возврата и действий строка не интерактивна и несёт
  лишь вершину структуры страницы.
-->

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

<PageHeader
	title={t("Обзор кампаний")}
	description={t("Статистика и статусы всех кампаний аккаунта за выбранный период.")}
/>

Возврат и действия

Стрелка возврата, заголовок и ряд главных действий справа.

<!--
  🟢

  Полная строка вложенного экрана: стрелка возврата к родителю, заголовок
  и ряд главных действий справа кнопками канона в snippet actions.
-->

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

<PageHeader title={t("Кампания «Осенний старт»")} back="/">
	{#snippet actions()}
		<Button variant="accent">{t("Сохранить")}</Button>
		<Button>{t("Отмена")}</Button>
	{/snippet}
</PageHeader>

Правка заголовка

editable: заголовок становится полем с карандашом, loading — скелетоном.

<!--
  🟢

  Правка заголовка на месте и загрузка (эталон: Vue-легаси pageHeader
  editable / v-skeleton): заголовок — поле с карандашом, значение уходит в
  onrename; пока данных нет — скелетон.
-->

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

let title = $state(t("Кампания: лето 2026"));
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-3); width: 560px;">
	<PageHeader bind:title editable back="/table" onrename={(next) => (title = next)} />
	<PageHeader title={t("Загрузка")} loading />
</div>