website/plasma-ui-docs/docs/components/Header.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/components/Header.mdx
158 строк5 KB
Ivan Kudryavtsev
docs(plasma-ui, plasma-web): fix images in docs
10 фев 2023, 17:36
10 фев 2023, 17:3664f49b5
---
id: header
title: Header
---

import { PropsTable, Description, StorybookLink } from '@site/src/components';

# Header
Набор компонентов для создания шапки.
Шапку необходимо вкладывать в компонент [`Container`](../grid/#container).

<StorybookLink name="Header" />

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

<Description name="Header" />
<PropsTable name="Header" />

### Пример

```tsx live
import React from 'react';
import { Container, Header, Button } from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <Container>
                <Header
                    back={true}
                    logo="/ui/images/320_320_12.jpg"
                    logoAlt="Logo"
                    title="Header title text"
                    subtitle="Subtitle text"
                    onBackClick={() => console.log('Back click!')}
                >
                    <Button>Header content</Button>
                </Header>
            </Container>
        </div>
    );
}
```

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

```tsx
// Неправильно:
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
<Description name="HeaderRoot" />
<PropsTable name="HeaderRoot" />

### HeaderBack
<Description name="HeaderBack" />
<PropsTable name="HeaderBack" />

### HeaderMinimize
<Description name="HeaderMinimize" />
<PropsTable name="HeaderMinimize" />

### HeaderLogo
<Description name="HeaderLogo" />
<PropsTable name="HeaderLogo" />

### HeaderTitleWrapper
<Description name="HeaderTitleWrapper" />

### HeaderSubtitle
<Description name="HeaderSubtitle" />

### HeaderTitle
<Description name="HeaderTitle" />

### HeaderContent
<Description name="HeaderContent" />

### Пример

```tsx live
import React from 'react';
import {
    Container,
    Header,
    HeaderRoot,
    HeaderBack,
    HeaderMinimize,
    HeaderLogo,
    HeaderTitleWrapper,
    HeaderSubtitle,
    HeaderTitle,
    HeaderContent,
    Button,
} from '@salutejs/plasma-ui';

export function App() {
    const [isBack, setIsBack] = useState(true);

    const onBackClick = () => {
        setIsBack(false);
    };

    const onMinimizeClick = () => {
        setIsBack(true);
    };

    return (
        <Container>
            <HeaderRoot>
                {isBack ? <HeaderBack onClick={onBackClick} /> : <HeaderMinimize onClick={onMinimizeClick} />}
                <HeaderLogo src="/ui/images/320_320_12.jpg" alt="Logo" />
                <HeaderTitleWrapper>
                    <HeaderSubtitle>Label text</HeaderSubtitle>
                    <HeaderTitle>Header title text</HeaderTitle>
                </HeaderTitleWrapper>
                <HeaderContent>
                    <Button>Header content</Button>
                </HeaderContent>
            </HeaderRoot>
        </Container>
    );
}
```

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

## NeuHeader
<Description name="NeuHeader" />
<PropsTable name="NeuHeader" />