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>

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