Header

Набор компонентов для создания шапки. Шапку необходимо вкладывать в компонент Container.

Storybook

Комплексный компонент – Header​

Пример​

Live Editor
Result
Open in CodeSandbox

Комбинация свойств​

Header имеет свойства, которые нельзя использовать без соответствующих парных свойств:

// Неправильно:
const a = <Header subtitle="Subtitle" />;
// Правильно:
const b = <Header title="Title" />;
const c = <Header title="Title" subtitle="Subtitle" />;

// Неправильно:
const d = <Header onBackClick={() => alert('Back click.')} />;
// Правильно:
const e = <Header back onBackClick={() => alert('Back click.')} />;

// Неправильно:
const d = <Header onMinimizeClick={() => alert('Minimize click.')} />;
// Правильно:
const e = <Header minimize onMinimizeClick={() => alert('Minimize click.')} />;

// Неправильно:
const f = <Header logoAlt="Fancy image." />;
// Правильно:
const g = <Header logo="/path/to/fancy-image.jpg" logoAlt="Fancy image." />;

Компоненты для собственной сборки шапки​

Рекомендуется использовать компонент Header. Если вам нужно больше контроля за версткой шапки, используйте составные части, где корневым узлом будет HeaderRoot.

HeaderRoot​

HeaderBack​

HeaderMinimize​

HeaderTitleWrapper​

HeaderSubtitle​

HeaderTitle​

HeaderContent​

Пример​

Live Editor
Result
Open in CodeSandbox

Кнопки назад и свернуть​

В структуре шапки обязательно должен присутствовать один из компонентов-кнопок – HeaderBack (назад) или HeaderMinimize (свернуть). Данные кнопки являются взаимоисключающими, т.е. можно указать или HeaderBack или HeaderMinimize. На SberBox эти кнопки должны быть нефокусируемыми.

NeuHeader​