Header

import { Header } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Код tableRowStyleexport const tableRowStyle = {
    border: '1px solid #EDEDED',
    display: 'flex',
    alignItems: 'center',
    minHeight: '50px',
    padding: '15px',
};

Размеры

<div style={tableRowStyle}>
  <Header as="h1">H1. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2">H2. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h3">H3. MegaFon</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h5">H5. MegaFon</Header>
</div>

Цвета

<div style={tableRowStyle}>
  <Header color="default" as="h2">MegaFon default</Header>
</div>
<div style={{...tableRowStyle, background: 'var(--stcWhite)'}}>
  <Header color="black" as="h2">MegaFon black</Header>
</div>
<div style={{...tableRowStyle, background: 'var(--stcBlack)'}}>
  <Header color="white" as="h2">MegaFon white</Header>
</div>
<div style={tableRowStyle}>
  <Header color="green" as="h2">MegaFon green</Header>
</div>
<div style={tableRowStyle}>
  <Header color="purple" as="h2">MegaFon purple</Header>
</div>
<div style={tableRowStyle}>
  <Header color="blue" as="h2">MegaFon blue</Header>
</div>

Внешние отступы

(сверху/снизу)

<div style={tableRowStyle}>
  <Header as="h1" margin>H1. MegaFon (0/32)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2" margin>H2. MegaFon (56/24)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h3" margin>H3. MegaFon (32/24)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h5" margin>H5. MegaFon (24/16)</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2">Без отступов</Header>
</div>

Дополнительный компонент

<div style={tableRowStyle}>
  <Header as="h2" addition={
      <Header as="h3">Additional component</Header>
  }>MegaFon</Header>
</div>

Выравнивание

<Header align="left">
  MegaFon
</Header>
<Header align="center">
  MegaFon
</Header>
<Header align="right">
  MegaFon
</Header>

Межстрочные отступы

<Header as="h5">
  Стандартное значение
</Header>

<div style={{ width: '5em', marginTop: '18px' }}>
  <Header space="tight" as="h5">
      В узком контейнере
  </Header>
</div>

Семантическое переопределение тега

<div style={tableRowStyle}>
  <Header as="h1" tag="h2">H1 стиль, но семантически h2</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h2" tag="h3">H2 стиль, но семантически h3</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h3" tag="h4">H3 стиль, но семантически h4</Header>
</div>
<div style={tableRowStyle}>
  <Header as="h5" tag="h4">H5 стиль, но семантически h4</Header>
</div>

Prop name	Type	Default	Description
as	"h1" \| "h2" \| "h3" \| "h5" \| undefined		Тег (определяет базовый тег и стили)
tag	"h1" \| "h2" \| "h3" \| "h5" \| "h4" \| "h6" \| undefined		Тег для семантической разметки (переопределение тега без изменения стилей)
space	"wide" \| "tight" \| undefined	wide	Поведение текста при встраивании в широкий или узкий контейнер (только для h5)
color	"green" \| "purple" \| "default" \| "white" \| "black" \| "inherit" \| "blue" \| undefined	default	Цвет
margin	boolean \| undefined		Включить отступ
addition	Element \| undefined		Дополнительный элемент
className	string \| string[] \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
align	"center" \| "left" \| "inherit" \| "right" \| undefined	inherit	Горизонтальное выравнивание
children*	ReactNode		Дочерний элемент компонента
onClick	((e: SyntheticEvent<EventTarget, Event>) => void) \| undefined		Обработчик клика