ContentArea

Компонент задает содержимому страницы боковые отступы, максимальную ширину и центрирование на больших разрешениях

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

Примеры и код

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

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

<ContentArea>
  Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
  Монтажник проведёт все необходимые работы под ключ.
</ContentArea>

Фоновый цвет

Для внешнего контейнера

Цвет применяется ко всему компоненту

<ContentArea outerBackgroundColor="white">
  <div style={{ color: '#333333'}}>
      (white) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="black">
  <div style={{ color: '#ffffff'}}>
      (black) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="green">
  <div style={{ color: '#ffffff'}}>
      (green) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="purple">
  <div style={{ color: '#ffffff'}}>
      (purple) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="spbSky0">
  <div style={{ color: '#333333'}}>
      (spbSky0) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

<ContentArea outerBackgroundColor="spbSky1">
  <div style={{ color: '#333333'}}>
      (spbSky1) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>
<ContentArea outerBackgroundColor="spbSky2">
  <div style={{ color: '#333333'}}>
      (spbSky2) Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

Для внутреннего контейнера

Цвет применяется к отцентрированному контейнеру с ограниченной шириной. Разница будет видна при ширине компонента больше 1440px.

<ContentArea innerBackgroundColor="purple">
  <div style={{ color: '#ffffff' }}>
      Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </div>
</ContentArea>

Отключение боковых отступов на всех разрешениях

Разница будет видна при изменении ширины окна

<ContentArea disableIndents="all" outerBackgroundColor="spbSky0">
  Без отключения отступов. Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям
  Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea disableIndents="mobile-tablet" outerBackgroundColor="spbSky0">
  Отключение боковых оступов на разрешении 0–1023px. Подключение к домашнему интернету осуществляется в удобное
  для вас время по технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea disableIndents="mobile" outerBackgroundColor="spbSky0">
  Отключение боковых оступов на разрешении 0–767px. Подключение к домашнему интернету осуществляется в удобное для
  вас время по технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>

Уменьшение отступов для маленьких мобильных разрешений (320px-359px)

<ContentArea innerBackgroundColor="spbSky0" indents="small-mobile">
  C уменьшенными отступами. Подключение к домашнему интернету осуществляется в удобное для вас время по
  технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>
<ContentArea outerBackgroundColor="spbSky0">
  C отступами по умолчанию. Подключение к домашнему интернету осуществляется в удобное для вас время по
  технологиям Ethernet, Docsis. Монтажник проведёт все необходимые работы под ключ.
</ContentArea>

Prop name	Type	Default	Description
outerBackgroundColor	BackgroundColorType	transparent	Фоновый цвет внешнего контейнера
innerBackgroundColor	BackgroundColorType	transparent	Фоновый цвет внутреннего контейнера
disableIndents	DisableIndentsType		Отключение отступов на различных разрешениях
indents	"small-mobile"		Изменение отступов на различных разрешениях
className	string		Дополнительные классы для корневого элемента
classes	{ root?: string; inner?: string; }		Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; inner?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам