Page Header

<sf-page-header> — шапка страницы административного приложения: путь к странице, заголовок, число записей, звезда избранного и главные действия в одной строке. Ставьте её в начало каждой страницы администрирования рядом с Admin Menu: меню показывает, где находится раздел, шапка — что это за страница и что на ней можно сделать.

Пример

<sf-page-header heading="Каталог решений" count="448" star="off">
  <sf-breadcrumbs slot="path" aria-label="Путь к странице" items='[{"label":"Администрирование","href":"#admin"},{"label":"Данные","href":"#data"},{"label":"Каталог решений"}]'></sf-breadcrumbs>
  <sf-button slot="actions" appearance="outline" icon-start="download" text="Экспорт"></sf-button>
  <sf-button slot="actions" icon-start="add" text="Создать"></sf-button>
</sf-page-header>

Применение

Заголовок и число записей

heading — название страницы. Компонент выводит его как h1 четвёртой ступени заголовков; отдельно оформлять его не нужно, а длинное название обрезается многоточием в одну строку.

count — сколько записей на странице, строкой: 448, 1,2 тыс.. Значение выводится значком рядом с заголовком; пустое значение счётчик не рисует. Итоги показывает шапка, а не меню: в строках меню бывают только счётчики непрочитанного и ожидающего.

Путь и действия

Содержимое передаётся в слоты:

• path — путь к странице над строкой заголовка, обычно Breadcrumbs;
• actions — главные действия страницы, прижатые к концу строки: одна основная кнопка и при необходимости несколько второстепенных;
• start — элемент перед заголовком, например кнопка открытия меню на узком экране.

Шапка не задаёт действиям вид: кнопки в слоте actions выглядят так, как их передали.

Страница для всех сайтов

level="install" ставит рядом с заголовком отметку «для всех сайтов». Задавайте её на страницах, которые относятся ко всей установке, а не к одному сайту: пользователи, пакеты, обновления. Значение по умолчанию site отметки не рисует.

<sf-page-header heading="Пользователи" count="12" level="install">
  <sf-breadcrumbs slot="path" aria-label="Путь к странице" items='[{"label":"Администрирование","href":"#admin"},{"label":"Пользователи"}]'></sf-breadcrumbs>
  <sf-button slot="actions" icon-start="person_add" text="Пригласить"></sf-button>
</sf-page-header>

Место на странице и размер действий

Кнопкам в слоте actions берите ступень остальных элементов страницы: рядом с полями sf-input--size-1 — кнопки размера 1 (size="1" у Smart-кнопки, sf-button--size-1 у классовой). Кнопка только со значком называется своим атрибутом: label у <sf-copy-button>, aria-label у классовой кнопки.

Своих отступов по краям у шапки нет: она встаёт в контейнер страницы с отступами вместе с остальным содержимым, а не над ним. Иначе путь, заголовок и действия прижимаются к краям окна.

<main class="p-4 flex flex-col gap-3">
  <sf-page-header heading="Настройки решения">
    <sf-breadcrumbs slot="path">…</sf-breadcrumbs>
    <sf-copy-button slot="actions" value="https://larena.test/admin/solutions/42" icon="link" text="Скопировать ссылку" label="Скопировать ссылку на страницу" size="1"></sf-copy-button>
  </sf-page-header>
  <form>…</form>
</main>

Избранное и событие sf-page-header-star

star управляет звездой: пустое значение её не рисует, off и on рисуют звезду в выключенном и включённом состоянии. Звезду показывайте только там, где страницу действительно можно добавить в избранное.

Нажатие на звезду отправляет отменяемое событие sf-page-header-star с event.detail.on — состоянием, которое просит пользователь. Если событие не отменено, компонент сам переключает star. Если состояние хранит сервер, отмените событие, дождитесь ответа и задайте star по нему: так звезда не покажет состояние, которое не сохранилось.

const header = document.querySelector('sf-page-header');
header.addEventListener('sf-page-header-star', async (event) => {
  event.preventDefault();
  const saved = await saveFavourite(event.detail.on);
  header.setAttribute('star', saved ? 'on' : 'off');
});

Если та же страница отмечена в меню администратора, после ответа сервера попросите меню перечитать избранное методом refresh() у <sf-admin-menu>.

Подписи

Подписи звезды и отметки «для всех сайтов» компонент берёт на языке страницы (русском или английском); передавать их не нужно.

Доступность

• Заголовок страницы — h1 внутри шапки. Не ставьте на странице второй h1: шапка уже называет страницу.
• Звезда — кнопка в обычном порядке Tab с aria-pressed. Её подпись говорит, что произойдёт при нажатии: «В избранное» или «Убрать из избранного». Enter и Space переключают её.
• Путь и действия получают фокус в порядке разметки: сначала путь, затем звезда, затем действия. У кнопки действия только со значком задайте aria-label.
• Дайте пути доступное имя, например aria-label="Путь к странице".

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• heading — string, по умолчанию пусто. Заголовок страницы.
• count — string, по умолчанию пусто. Сколько записей на странице; пустое значение не выводит счётчик. В меню администратора итогов нет, поэтому они выводятся здесь.
• level — string, по умолчанию site, значения: site, install. install отмечает страницу, общую для всех сайтов.
• star — string, по умолчанию пусто, значения: пусто, off, on. Пустое значение не рисует звезду; off и on рисуют её в соответствующем состоянии.
• root-class — string, по умолчанию пусто.

Методы

Публичных методов нет.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• sf-page-header-star — detail: { on: boolean }. Пользователь нажал на звезду. Отменяемое: элемент, который ждёт собственного ответа, отменяет событие и сам задаёт star.

Доступность

• Роль: содержимое баннера (banner); заголовок — h1.
• Доступное имя: внутренний.
• Клавиши: Tab доходит до звезды и действий, Enter или Space ставит и снимает звезду.
• Фокус: Звезда — нативная кнопка в sf-icon-button с aria-pressed и подписью, которая говорит, что произойдёт при нажатии.

Минимальная разметка

<sf-page-header heading="Каталог решений" count="448" star="off"><sf-breadcrumbs slot="path"><sf-breadcrumbs-item href="/">simai.ru</sf-breadcrumbs-item><sf-breadcrumbs-item href="/data">Данные</sf-breadcrumbs-item></sf-breadcrumbs><sf-button slot="actions" icon-start="add">Создать</sf-button></sf-page-header>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/page-header
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-page-header

См. также

• Admin Menu — навигация администратора, рядом с которой стоит шапка.
• Breadcrumbs — путь к странице для слота path.