Parameter

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

Примеры и код

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

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

<Parameter items={[{ title: ['Заголовок'], value: 'Значение' }]} disableBorderTop />
<Parameter
  items={[
      {
          title: ['Заголовок и описание'],
          description: [{ value: 'Выбирай, Смотри, Слушай, Говори, Общайся' }],
          value: 'Значение',
          valueFrameColor: 'gray'
      },
  ]}
/>
<Parameter
  items={[
      {
          title: ['Заголовок и скрытое описание'],
          description: [
              {
                  value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                  isCollapsible: true,
              },
          ],
          value: '500&nbsp₽',
          valueFrameColor: 'gray',
          valueUnit: 'в&nbspмесяц',
      },
  ]}
/>
<Parameter
  items={[
      {
          title: ['Заголовок и несколько описаний'],
          value: '50 ГБ',
          description: [
              {
                  value: 'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
              },
              {
                  value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                  isCollapsible: true,
              },
          ],
      },
  ]}
/>

Несколько строк

<Parameter
  items={[
      { title: ['Заголовок'] },
      { description: [{ value: 'Звонки на все номера России' }], value: 'Значение', valueFrameColor: 'gray' },
      { description: [{ value: 'SMS на прочие номера России' }], value: 'Значение', valueFrameColor: 'gray' },
      { description: [{ value: 'Безлимитный интернет' }], value: 'Значение', valueFrameColor: 'gray' },
  ]}
  borderBottom
/>

Заголовок

В несколько строк

<Parameter
  items={[
      {
          title: ['Детализация в салонах МегаФона', 'Оплачивается каждый день заказанной детализации.'],
          value: '2ГБ',
      },
  ]}
  borderBottom
/>

C иконкой

<Parameter
  icon={<WiFiIcon style={{ display: 'block', fill: '#00B956' }} />}
  items={[{ title: ['Интернет не на все сервисы'], value: '500&nbsp₽' }]}
  borderBottom
/>

С тултипом

<Parameter
  tooltip="После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно."
  items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
/>

Значение

В рамке

<Parameter
  items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽', valueFrameColor: 'gray' }]}
  borderBottom
/>

С подписью

<Parameter
  items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽', valueUnit: 'в&nbspмесяц' }]}
  borderBottom
/>

Одно на несколько строк

<Parameter
  mergedValue="Значение"
  items={[
      {
          title: ['Заголовок'],
          valueFrameColor: 'gray',
          description: [
              {
                  value: 'При подключении или переходе на тариф списывается половина ежемесячной абонентской платы',
              },
          ],
      },
      {
          title: ['Заголовок'],
          description: [
              {
                  value: 'При подключении или переходе на тариф списывается половина ежемесячной абонентской платы',
              },
          ],
      },
  ]}
  borderBottom
/>

В несколько строк

multilineValueconst multilineValue = 'до 100 Гб\nи до 1200 минут';

<Parameter items={[{ title: ['Звонки на все номера России'], value: multilineValue }]} borderBottom />

Нижняя граница

<Parameter items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} borderBottom />

Без верхней границы

<Parameter items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} disableBorderTop />

Границы с цветом

<Parameter
  borderColor="darker"
  items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  borderBottom
/>

Без ограничения по ширине

<Parameter items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]} fullWidth borderBottom />

Бейдж

<Parameter
  badge="VIP"
  badgeColor="brand-purple"
  items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  disableBorderTop
/>

Кастомные компоненты

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

Демо данныеconst titleWithLink = (
    <div>
        Тарифы <Link href="https://moscow.megafon.ru">Включайся!</Link>, с которыми работает опция
    </div>
);

const textWithLink = <Link href="https://moscow.megafon.ru">Выбирай, Смотри, Слушай, Говори, Общайся</Link>;

const textWithParagraph = (
    <div>
        <Paragraph hasMargin={false}>Почта</Paragraph>
        <Caption hasMargin={false}>Mail.ru, Яндекс.Почта, Gmail</Caption>
    </div>
);

<Parameter
  items={[
      {
          title: [titleWithLink],
          value: '500&nbsp₽',
          description: [
              { value: textWithLink },
              { value: textWithParagraph },
              { value: textWithParagraph },
          ],
      },
  ]}
  borderBottom
/>

Prop name	Type	Default	Description
items*	ItemType[]		Массив с данными для строки
className	string		Дополнительный класс для основного контейнера
badge	string		Текст для бейджа
badgeType	PromoBadgeTypesType	popular	DEPRECATED. Тип бэйджа (используйте badgeColor)
badgeColor	PromoBadgeColorsType		Цвет бейджа
tooltip	string		Текст тултипа
disableBorderTop	boolean	false	Отключить верхнюю границу
borderBottom	boolean	false	Наличие нижней границы
borderColor	"default" \| "darker"	default	Цвет верхней и нижней границ
mergedValue	string		Единое значение для всей строки
icon	ReactNode		Иконка для строки
fullWidth	boolean	false	Растягивание компонента на всю доступную ширину
dataAttrs	{ root?: Record<string, string>; moreLink?: Record<string, string>; itemTitle?: Record<string, string>; itemValue?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
classes	{ title?: string; openedDescription?: string; toggleDescription?: string; }	{}	Дополнительные классы для внутренних элементов
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент

type BadgeColorType = React.ComponentProps<typeof PromoBadge>['color'];

type ItemType = {
    title?: React.ReactNode[];
    titleSize?: TitleSizeType;
    description?: DescriptionType[];
    value?: string | React.ReactNode;
    valueUnit?: string;
    valueFrameColor?: ValueFrameColorType;
};

type TitleSizeType = 'default' | 'big';
type ValueFrameColorType = 'none' | 'default' | 'gray';