Figma

Property

Компонент Property является оберткой над компонентом Parameter из раздела Компоненты и имеет идентичные свойства и методы

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, Messenger, Snapchat, eMotion, ТамТам</p>',
    convertConfig,
);

Комбинированный вариант

<Container>
  <Property
      items={[
          {
              title: ['Доп звонки'],
              description: [
                  {
                      value: 'После израсходования пакета минут звонки на номера МегаФона России предоставляются безлимитно.',
                  },
                  {
                      value: 'Звонки на местные городские номера, когда вы находитесь дома, оплачиваются отдельно.',
                      isCollapsible: true,
                  },
              ],
          },
      ]}
      disableBorderTop
  />
  <Property badge={'Акция'} badgeColor="brand-purple" items={[{ title: ['Звонки на все номера России'], value: valueInSeveralRow }]} />
  <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: [titleWithLink],
                  value: '500&nbsp₽',
                  description: [{ value: textWithLink }, { value: textWithParagraph }],
              },
          ]}
      />
  <Property items={[{ title: ['Срок оплаты'], value: 'Оплачивается каждый день заказанной детализации' }]} />
</Container>
Prop nameTypeDefaultDescription
items*ItemType[]Массив с данными для строки
classNamestringДополнительный класс для основного контейнера
badgestringТекст для бейджа
badgeTypePromoBadgeTypesTypeDEPRECATED. Тип бэйджа (используйте badgeColor)
badgeColorPromoBadgeColorsTypeЦвет бейджа
tooltipstringТекст тултипа
disableBorderTopbooleanОтключить верхнюю границу
borderBottombooleanНаличие нижней границы
borderColor"default" | "darker"Цвет верхней и нижней границ
mergedValuestringЕдиное значение для всей строки
iconReactNodeИконка для строки
fullWidthbooleanРастягивание компонента на всю доступную ширину
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; }Дополнительные классы для внутренних элементов
rootRefRef<HTMLDivElement>Ссылка на корневой элемент