Property

import { Property } from '@megafon/ui-shared';

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

Демо данныеimport { TextLink, Paragraph } from '@megafon/ui-core';
import { convert } from '@megafon/ui-helpers';
const convertConfig = {
    a: {
        component: TextLink,
        props: ['href'],
    },
    p: {
        component: Paragraph,
        props: ['size', 'hasMargin'],
    },
};
const titleWithLink = convert(
    'Тарифы <a href="https://moscow.megafon.ru">Включайся!</a>, с которыми работает опция',
    convertConfig
);
const textWithLink = convert(
    '<a href="https://moscow.megafon.ru">Выбирай, Смотри, Слушай, Говори, Общайся</a>',
    convertConfig
);
const textWithParagraph = convert(
    '<p hasMargin="false">Почта</p><p size="small">Mail.ru, Яндекс.Почта, Gmail</p><p hasMargin="false">Мессенджеры</p><p size="small">WhatsApp, Viber, Facebook Messenger, Snapchat, eMotion, ТамТам</p>',
    convertConfig
);

Заголовок

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

Детализация в салонах МегаФона

Оплачивается каждый день заказанной детализации.

2ГБ

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

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

C иконкой

Интернет не на все сервисы

500 ₽

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

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

Значение

В рамке

Звонки на все номера России

500 ₽

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

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

С подписью

Звонки на все номера России

500 ₽

в месяц

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

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

В рамке и с подписью

Звонки на все номера России

500 ₽

в месяц

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

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

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

Звонки на все номера России

до 100 Гб и до 1200 минут

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

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

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

Музыкальные сервисы

500 ₽

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.

Интернет не на все сервисы

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

<ContentArea>
  <Property
    mergedValue="500&nbsp₽"
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
          },
        ],
        value: '',
      },
      {
        title: ['Интернет не на все сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
          },
        ],
      },
    ]}
  />
</ContentArea>

<ContentArea>
  <Property
    mergedValue="500&nbsp₽"
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
          },
        ],
        value: '',
      },
      {
        title: ['Интернет не на все сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
          },
        ],
      },
    ]}
  />
</ContentArea>

Контент

Только заголовок

Звонки на все номера России

500 ₽

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

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

Заголовок и описание

Интернет не на все сервисы

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка

<ContentArea>
  <Property
    items={[
      {
        title: ['Интернет не на все сервисы'],
        description: [
          { value: 'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка' },
        ],
      },
    ]}
  />
</ContentArea>

<ContentArea>
  <Property
    items={[
      {
        title: ['Интернет не на все сервисы'],
        description: [
          { value: 'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка' },
        ],
      },
    ]}
  />
</ContentArea>

Заголовок и скрытое описание

Музыкальные сервисы

500 ₽

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

Подробнее

<ContentArea>
  <Property
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
        value: '500&nbsp₽',
      },
    ]}
  />
</ContentArea>

<ContentArea>
  <Property
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
        value: '500&nbsp₽',
      },
    ]}
  />
</ContentArea>

Несколько описаний

Доп звонки

500 ₽

После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

Подробнее

<ContentArea>
  <Property
    items={[
      {
        title: ['Доп звонки'],
        value: '500&nbsp₽',
        description: [
          {
            value:
              'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
          },
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
      },
    ]}
  />
</ContentArea>

<ContentArea>
  <Property
    items={[
      {
        title: ['Доп звонки'],
        value: '500&nbsp₽',
        description: [
          {
            value:
              'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
          },
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
      },
    ]}
  />
</ContentArea>

Бейдж

Тип бейджа по умолчанию

Звонки на все номера России

500 ₽

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

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

VIP бейдж

Звонки на все номера России

500 ₽

<ContentArea>
  <Property
    badge={'Акция'}
    badgeType="vip"
    items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  />
</ContentArea>

<ContentArea>
  <Property
    badge={'Акция'}
    badgeType="vip"
    items={[{ title: ['Звонки на все номера России'], value: '500&nbsp₽' }]}
  />
</ContentArea>

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

Абонентская плата:

Звонки на все номера России

500 ₽

Звонки на все номера России

500 ₽

Звонки на все номера России

500 ₽

<ContentArea>
  <Property
    items={[
      { title: ['Абонентская плата:'] },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
    ]}
  />
</ContentArea>

<ContentArea>
  <Property
    items={[
      { title: ['Абонентская плата:'] },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
      {
        value: '500&nbsp₽',
        description: [{ value: 'Звонки на все номера России' }],
      },
    ]}
  />
</ContentArea>

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

Звонки на все номера России

500 ₽

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

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

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

Звонки на все номера России

500 ₽

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

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

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

Звонки на все номера России

500 ₽

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

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

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

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

Тарифы Включайся!, с которыми работает опция

500 ₽

Выбирай, Смотри, Слушай, Говори, Общайся

Почта

Mail.ru, Яндекс.Почта, Gmail

Мессенджеры

WhatsApp, Viber, Facebook Messenger, Snapchat, eMotion, ТамТам

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

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

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

Звонки на все номера России

500 ₽

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

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

С тултипом

Звонки на все номера России

500 ₽

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

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

Комбинирование

Доп звонки

После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

Подробнее

Звонки на все номера России

Безлимитно

Звонки на все номера России

500 ₽

в месяц

Музыкальные сервисы

500 ₽

Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.

Интернет не на все сервисы

Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.

Абонентская плата:

Звонки на все номера России

500 ₽

SMS на прочие номера России

3 ₽ в сутки

Срок оплаты

Оплачивается каждый день заказанной детализации

<Container>
  <Property
    items={[
      {
        title: ['Доп звонки'],
        description: [
          {
            value:
              'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
          },
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
      },
    ]}
  />
  <Property
    icon={<WiFi style={{ display: 'block', fill: '#00B956' }} />}
    items={[{ title: ['Звонки на все номера России'], value: 'Безлимитно' }]}
  />
  <Property
    tooltip="После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно"
    borderColor="darker"
    borderBottom
    items={[
      {
        title: ['Звонки на все номера России'],
        value: '500&nbsp₽',
        valueFrameColor: 'gray',
        valueUnit: 'в&nbspмесяц',
      },
    ]}
  />
  <Property
    disableBorderTop
    mergedValue="500&nbsp₽"
    badge={'Акция'}
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
          },
        ],
        value: '',
      },
      {
        title: ['Интернет не на все сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
          },
        ],
      },
    ]}
  />
  <Property
    items={[
      { title: ['Абонентская плата:'] },
      {
        value: '500&nbsp₽',
        description: [{ value: ['Звонки на все номера России'] }],
      },
      {
        value: '3 ₽ в сутки',
        description: [{ value: ['SMS на прочие номера России'] }],
      },
    ]}
  />
  <Property
    items={[
      {
        title: ['Срок оплаты'],
        value: 'Оплачивается каждый день заказанной детализации',
      },
    ]}
  />
</Container>

<Container>
  <Property
    items={[
      {
        title: ['Доп звонки'],
        description: [
          {
            value:
              'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
          },
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
            isCollapsible: true,
          },
        ],
      },
    ]}
  />
  <Property
    icon={<WiFi style={{ display: 'block', fill: '#00B956' }} />}
    items={[{ title: ['Звонки на все номера России'], value: 'Безлимитно' }]}
  />
  <Property
    tooltip="После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно"
    borderColor="darker"
    borderBottom
    items={[
      {
        title: ['Звонки на все номера России'],
        value: '500&nbsp₽',
        valueFrameColor: 'gray',
        valueUnit: 'в&nbspмесяц',
      },
    ]}
  />
  <Property
    disableBorderTop
    mergedValue="500&nbsp₽"
    badge={'Акция'}
    items={[
      {
        title: ['Музыкальные сервисы'],
        description: [
          {
            value:
              'Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка, Google Play Music, Apple Music, онлайн радио.',
          },
        ],
        value: '',
      },
      {
        title: ['Интернет не на все сервисы'],
        description: [
          {
            value:
              'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
          },
        ],
      },
    ]}
  />
  <Property
    items={[
      { title: ['Абонентская плата:'] },
      {
        value: '500&nbsp₽',
        description: [{ value: ['Звонки на все номера России'] }],
      },
      {
        value: '3 ₽ в сутки',
        description: [{ value: ['SMS на прочие номера России'] }],
      },
    ]}
  />
  <Property
    items={[
      {
        title: ['Срок оплаты'],
        value: 'Оплачивается каждый день заказанной детализации',
      },
    ]}
  />
</Container>