Grid

import { Grid, GridColumn } from '@megafon/ui-core';

Примеры и код

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

Код itemViewconst itemView = {
    backgroundColor: '#00B956',
    color: '#fff',
    textAlign: 'center',
    padding: '5px 10px',
};

Базовое использование

<Grid>
  <GridColumn>
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

Вертикальные и горизонтальные отступы между колонками

Средние

<Grid guttersLeft="medium" guttersBottom="medium">
      <GridColumn all="5"><div style={itemView}>Тарифы</div></GridColumn>
      <GridColumn all="2"><div style={itemView}>Интернет</div></GridColumn>
      <GridColumn all="2"><div style={itemView}>Услуги</div></GridColumn>
      <GridColumn all="3"><div style={itemView}>Опции</div></GridColumn>
      <GridColumn all="12"><div style={itemView}>Личный кабинет</div></GridColumn>
  </Grid>

Большие

<Grid guttersLeft="large" guttersBottom="large">
  <GridColumn all="5">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="12">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Горизонтальное выравнивание

'between'

Равномерное распределение всех элементов по горизонтали. Боковые элементы прижаты к краям контейнера.

<Grid guttersLeft="large" guttersBottom="large" hAlign="between">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

'around'

Равномерное распределение всех элементов по горизонтали. Пустое пространство по краям равно половине пространства между двумя соседними элементами.

<Grid guttersLeft="large" guttersBottom="large" hAlign="around">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По центру

<Grid guttersLeft="large" guttersBottom="large" hAlign="center">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По левому краю

<Grid guttersLeft="large" guttersBottom="large" hAlign="left">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По правому краю

<Grid guttersLeft="large" guttersBottom="large" hAlign="right">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

Вертикальное выравнивание

По верхнему краю

<Grid guttersLeft="medium" hAlign="between" vAlign="top">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По нижнему краю

<Grid guttersLeft="medium" hAlign="between" vAlign="bottom">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По центру

<Grid guttersLeft="medium" hAlign="between" vAlign="center">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По базовой линии элементов

<Grid guttersLeft="medium" hAlign="between" vAlign="baseline">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

Отключение нескольких строк

Колонки не переносятся на новые строки при достижении максимального размера (12), а сжимаются с сохранением процентного соотношения.

<Grid guttersLeft="medium" multiRow={false}>
  <GridColumn all="12">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Разная ширина колонок на разных разрешениях

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="6" tablet="4" mobile="2">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5" wide="7" tablet="9" mobile="11">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4" tablet="3" desktop="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3" wide="12">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Изменение порядка колонок

Применяется при изменении размеров окна.

На мобильном разрешении

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" mobile="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderMobile="3">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderMobile="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

На планшетном разрешении

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderTablet="3">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderTablet="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

На разных разрешениях

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" mobile="6" orderWide="3">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderTablet="3" orderWide="2">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderTablet="2" orderWide="1">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

Смещение колонок

Левое

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" leftOffsetAll="3"><div style={itemView}>Тарифы</div></GridColumn>
  <GridColumn all="5" leftOffsetAll="1"><div style={itemView}>Интернет</div></GridColumn>
  <GridColumn all="3" leftOffsetAll="2"><div style={itemView}>Услуги</div></GridColumn>
  <GridColumn all="4" leftOffsetAll="1"><div style={itemView}>Опции</div></GridColumn>
  <GridColumn all="4" leftOffsetAll="1"><div style={itemView}>Личный кабинет</div></GridColumn>
  <GridColumn all="3" leftOffsetAll="1"><div style={itemView}>Связь</div></GridColumn>
</Grid>

Правое

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" rightOffsetAll="3"><div style={itemView}>Тарифы</div></GridColumn>
  <GridColumn all="5" rightOffsetAll="1"><div style={itemView}>Интернет</div></GridColumn>
  <GridColumn all="3" rightOffsetAll="2"><div style={itemView}>Услуги</div></GridColumn>
  <GridColumn all="4" rightOffsetAll="1"><div style={itemView}>Опции</div></GridColumn>
  <GridColumn all="4" rightOffsetAll="1"><div style={itemView}>Личный кабинет</div></GridColumn>
  <GridColumn all="3" rightOffsetAll="1"><div style={itemView}>Связь</div></GridColumn>
</Grid>

Prop name	Type	Default	Description
hAlign	"left" \| "right" \| "center" \| "between" \| "around"		Выравнивание всех колонок по горизонтали
vAlign	"center" \| "top" \| "bottom" \| "baseline"		Выравнивание всех колонок по вертикали
guttersLeft	"large" \| "medium"		Отступ слева от колонки
guttersBottom	"large" \| "medium"		Отступ снизу от колонки
multiRow	boolean	true	Перенос столбцов в несколько строк
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; container?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам

GridColumn

Prop name	Type	Default	Description
wide	TGridSizeValues		Размер колон на разрещении 1280+
desktop	TGridSizeValues		Размер колон на разрещении 1024 - 1279
tablet	TGridSizeValues		Размер колон на разрещении 768 - 1023
mobile	TGridSizeValues		Размер колон на разрещении 767-
all	TGridSizeValues	12	Размер колон на всех разрешениях
orderWide	string	0	Порядок на разрещении 1280+
orderDesktop	string	0	Порядок на разрещении 1024 - 1279
orderTablet	string	0	Порядок на разрещении 768 - 1023
orderMobile	string	0	Порядок на разрещении 767-
orderAll	string	0	Порядок на всех разрешениях
leftOffsetWide	TGridSizeValues		Размер левого смещения на 1280+
leftOffsetDesktop	TGridSizeValues		Размер левого смещения на 1024 - 1279
leftOffsetTablet	TGridSizeValues		Размер левого смещения на 768 - 1023
leftOffsetMobile	TGridSizeValues		Размер левого смещения на 767-
leftOffsetAll	TGridSizeValues		Размер левого смещения на всех разрешениях
rightOffsetWide	TGridSizeValues		Размер правого смещения на 1280+
rightOffsetDesktop	TGridSizeValues		Размер правого смещения на 1024 - 1279
rightOffsetTablet	TGridSizeValues		Размер правого смещения на 768 - 1023
rightOffsetMobile	TGridSizeValues		Размер правого смещения на 767-
rightOffsetAll	TGridSizeValues		Размер правого смещения на всех разрешениях
align	"right" \| "left" \| "center"		Дополнительное выравние колонны
grow	boolean	false	Flex grow колонны
flex	boolean	false	Сделать колонну флекс контейнером
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам