Caption

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

Примеры и код

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

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

<Caption>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<div style={{ width: '10em' }}>
  <Caption space="tight">
      Кэпшн в узком контейнере
  </Caption>
</div>

Без отступа снизу

Показать код

<Caption hasMargin={false}>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>
<Caption hasMargin={false}>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

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

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

Показать код

<Caption align="left">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

По центру

Показать код

<Caption align="center">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

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

Показать код

<Caption align="right">
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

Цвета

Показать код

<Caption color="default">
  'content' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="gray">
  'gray' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<DemoBackgroundWrapper>
  <Caption color="white">
      'white' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
  </Caption>
</DemoBackgroundWrapper>

<Caption color="green">
  'green' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="purple">
  'purple' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

<Caption color="inherit">
  'inherit' - При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы
  за месяц и дополнительных услуг, указанных в заявке.
</Caption>

Код DemoBackgroundWrapperexport const DemoBackgroundWrapper: React.FC = ({ children }) => (
    <div style={{ background: '#00B956' }}>
        {children}
    </div>
);

Prop name	Type	Default	Description
align	"center" \| "left" \| "right" \| undefined		Выравнивание по горизонтали
space	"wide" \| "tight" \| undefined	wide	Поведение текста при встраивании в широкий или узкий контейнер
variant	"medium" \| "normal" \| undefined	normal	Начертание шрифта: обычный или полужирный
hasMargin	boolean \| undefined	true	Вертикальный отступ
color	ColorType \| undefined	default	Цвет текста
className	string \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
children	ReactNode		Дочерние элементы