PageHeader

className

string | undefined

type

"primary" | "secondary" | "ghost" | undefined

title

ReactNode

navBlock

ReactNode

actionsPanel

ReactNode

style

Record<string, ReactText> | undefined

rollUp

boolean | undefined

Basic usage

() => {
  const selectOptions = [
    {
      id: 0,
      header: 'Сущность 1',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Сущность 2',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Сущность 3',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Сущность 4',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Сущность 5',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Сущность 6',
      icon: 'bell-icon',
    },
  ]
  const [selectValue, setSelectValue] = useState(null)
  return (
    <section
      style={{
        height: '400px',
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <PageHeader
        title="Карточка сущности"
        actionsPanel={
          <PageHeader.ActionsPanel
            items={[
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Настроить отображение
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Настроить отображение' }]}
                  />
                ),
              },
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Просмотреть журнал
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Просмотреть журнал' }]}
                  />
                ),
              },
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Редактировать
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Редактировать' }]}
                  />
                ),
              },
            ]}
            placement="right"
          />
        }
        navBlock={
          <PageHeader.NavBlock
            navLabel="К списку сущностей"
            onClick={() => console.log('Click NavBlock')}
          />
        }
      />
      <main style={{ paddingTop: '48px' }}>
        <Select
          style={{ width: 200 }}
          options={selectOptions}
          value={selectValue}
          onChange={(event, item) => {
            setSelectValue(item)
          }}
          placeholder="Выберите"
          loadingPlaceholder="Загрузка..."
        />
        <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
      </main>
    </section>
  )
}

() => {
  const selectOptions = [
    {
      id: 0,
      header: 'Сущность 1',
      icon: 'tag-icon',
    },
    {
      id: 1,
      header: 'Сущность 2',
      icon: 'babai-icon',
    },
    {
      id: 2,
      header: 'Сущность 3',
      icon: 'tag-icon',
    },
    {
      id: 3,
      header: 'Сущность 4',
      icon: 'paint-icon',
    },
    {
      id: 4,
      header: 'Сущность 5',
      icon: 'tag-icon',
    },
    {
      id: 5,
      header: 'Сущность 6',
      icon: 'bell-icon',
    },
  ]
  const [selectValue, setSelectValue] = useState(null)
  return (
    <section
      style={{
        height: '400px',
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <PageHeader
        title="Карточка сущности"
        actionsPanel={
          <PageHeader.ActionsPanel
            items={[
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Настроить отображение
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Настроить отображение' }]}
                  />
                ),
              },
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Просмотреть журнал
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Просмотреть журнал' }]}
                  />
                ),
              },
              {
                element: (
                  <PageHeader.ActionsPanel.Button inverted>
                    Редактировать
                  </PageHeader.ActionsPanel.Button>
                ),
                menuElement: (
                  <PageHeader.ActionsPanel.List
                    options={[{ id: 1, header: 'Редактировать' }]}
                  />
                ),
              },
            ]}
            placement="right"
          />
        }
        navBlock={
          <PageHeader.NavBlock
            navLabel="К списку сущностей"
            onClick={() => console.log('Click NavBlock')}
          />
        }
      />
      <main style={{ paddingTop: '48px' }}>
        <Select
          style={{ width: 200 }}
          options={selectOptions}
          value={selectValue}
          onChange={(event, item) => {
            setSelectValue(item)
          }}
          placeholder="Выберите"
          loadingPlaceholder="Загрузка..."
        />
        <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
      </main>
    </section>
  )
}

rollUp prop

Внешний вид PageHeader, в таком случае, эквивалетен тому состоянию, который формируется во время прокрутки.
Проп rollUp никак не воздействует на внешний вид компонента с типом ghost.

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    title="Карточка сущности"
    rollUp
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    title="Карточка сущности"
    rollUp
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

Truncating long title

<section style={{ height: '480px', overflow: 'auto' }}>
  <PageHeader
    type="primary"
    title="Очень длинный заголовок, который тяжело уместить даже в три строки. Может статься так, что интерфейс будет сильно кукожить результатом интеграции"
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

<section style={{ height: '480px', overflow: 'auto' }}>
  <PageHeader
    type="primary"
    title="Очень длинный заголовок, который тяжело уместить даже в три строки. Может статься так, что интерфейс будет сильно кукожить результатом интеграции"
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

Primary type

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="primary"
    title="Карточка сущности"
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="primary"
    title="Карточка сущности"
    navBlock={
      <PageHeader.NavBlock navLabel="К списку сущностей" onClick={() => {}} />
    }
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Настроить отображение
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Настроить отображение' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Просмотреть журнал
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Просмотреть журнал' }]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button inverted>
                Редактировать
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[{ id: 1, header: 'Редактировать' }]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

Secondary type

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="secondary"
    title="Создать сущность"
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button primary>
                Сохранить
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[
                  {
                    id: 1,
                    header: 'Сохранить',
                  },
                ]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button>
                Отмена
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[
                  {
                    id: 1,
                    header: 'Отмена',
                  },
                ]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="secondary"
    title="Создать сущность"
    actionsPanel={
      <PageHeader.ActionsPanel
        placement="right"
        items={[
          {
            element: (
              <PageHeader.ActionsPanel.Button primary>
                Сохранить
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[
                  {
                    id: 1,
                    header: 'Сохранить',
                  },
                ]}
              />
            ),
          },
          {
            element: (
              <PageHeader.ActionsPanel.Button>
                Отмена
              </PageHeader.ActionsPanel.Button>
            ),
            menuElement: (
              <PageHeader.ActionsPanel.List
                options={[
                  {
                    id: 1,
                    header: 'Отмена',
                  },
                ]}
              />
            ),
          },
        ]}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

Ghost type

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="ghost"
    title="Учётные записи"
    navBlock={
      <PageHeader.NavBlock
        icon="menu-icon"
        navLabel="Открыть меню"
        onClick={() => {}}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

<section style={{ height: '400px', overflow: 'auto' }}>
  <PageHeader
    type="ghost"
    title="Учётные записи"
    navBlock={
      <PageHeader.NavBlock
        icon="menu-icon"
        navLabel="Открыть меню"
        onClick={() => {}}
      />
    }
  />
  <main style={{ paddingTop: '48px' }}>
    <h4>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>12. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>13. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>14. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>15. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
    <h4>16. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  </main>
</section>

PageHeader

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

rollUp prop

Truncating long title

Primary type

Secondary type

Ghost type

Basic usage