PageHeader

Шапка сторінки чи розділу — крихти, назва, опис, метадані, дії й вкладки в одному каркасі.

Кожен продуктовий екран починається однаково: де я (крихти або «Назад»), що це (назва й опис), у якому воно стані (метадані) і що з ним зробити (дії). У вихідних проєктах ця шапка написана заново на кожній сторінці — з різними відступами, кеглями й поведінкою на мобільному.

ТОВ «Сігма Трейд»

Оптовий покупець кераміки. Менеджер — Олена Бондар.

АктивнийКлієнт з березня 202412 угод

Посилання «Назад» і аватар

backTo — маршрут, а не history.back(): сторінку часто відкривають за прямим посиланням, і «назад» в історії вивів би з застосунку взагалі. Текст краще конкретний — «До замовлень», а не просто «Назад».

До команди

Олена Бондар

Менеджерка з продажу · Київ

Вміст сторінки починається під межею шапки.

API

Props

Назва	Тип	Типово	Опис
`title`	`string`	`""`	Назва сторінки чи розділу. Замінюється слотом `title`.
`size`	lgsmmd	`"md"`	Кегль назви. Розведено з `as`: семантика і вигляд — різні рішення.
`description`	`string`	`undefined`	Один-два речення під назвою: що тут відбувається або що зробити.
`as`	h1h2h3	`"h1"`	Рівень заголовка. `h1` — шапка сторінки (одна на сторінку); `h2` — шапка розділу чи панелі всередині неї. Вигляд від рівня не залежить — його задає `size`.
`backTo`	`string \| Record<string, unknown>`	`undefined`	Маршрут посилання «Назад» над назвою. Посилання, а не `history.back()`: сторінку часто відкривають за прямим посиланням, і «назад» у історії вивів би з застосунку взагалі.
`backLabel`	`string`	`"Назад"`	Текст посилання «Назад»: краще конкретний — «До замовлень».
`divider`	`boolean`	`false`	Межа під шапкою — коли далі одразу йде вміст без власної рамки.

Слоти

Назва	Опис
`breadcrumb`	Крихти над назвою — зазвичай `UiBreadcrumb`. Замінює посилання «Назад».
`leading`	Аватар, іконка чи логотип ліворуч від назви.
`title`	Власний вміст заголовка замість `title`: назва з чипом статусу.
`meta`	Рядок метаданих під назвою: чипи, дати, автор.
`actions`	Дії сторінки. На мобільному переносяться під назву.
`default`	Вміст під шапкою в її межах — найчастіше вкладки розділу.

Коли використовувати

Верх кожної сторінки застосунку: список, картка запису, налаштування.
Шапка розділу всередині сторінки — з as="h2" і меншим size.

Коли НЕ використовувати

Для маркетингового hero з великою типографікою — у шапки інша роль і інший ритм.
Для заголовка картки. У UiCard є слот header з власними відступами.

Доступність

Рівень заголовка (as) і кегль (size) — окремі props. Семантика й вигляд — різні рішення: шапка розділу мусить бути h2, навіть якщо дизайн хоче для неї великий кегль, інакше структура сторінки для скрінрідера ламається.

На сторінці — рівно один h1. Коли UiPageHeader стоїть усередині картки чи панелі, передавайте as="h2" або as="h3".

Дії переносяться під назву цілим рядком, а не стискають заголовок у стовпчик: у шапці працює flex-wrap з базовою шириною назви, а не сітка з фіксованою колонкою дій. Посилання «Назад» — рядок тексту заввишки 20px, тож на дотику його ціль добудовує невидима зона 45px, як у UiButton.