TextWithIcon

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

Примеры и код

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

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

<TextWithIcon>
  <TextWithIconItem
      text={['Привлечение новых клиентов и повышение лояльности действующих']}
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

Заголовок

<TextWithIcon title="Преимущества">
  <TextWithIconItem
      text="Привлечение новых клиентов и повышение лояльности действующих"
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

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

<TextWithIcon title="Преимущества" isFullWidth>
  <TextWithIconItem
      text="Привлечение новых клиентов и повышение лояльности действующих"
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

Prop name	Type	Default	Description
title	string		Заголовок
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
className	string		Дополнительный класс для корневого элемента
isFullWidth	boolean	false	Включить растягивание на всю ширину контейнера
children*	ReactElement<ITextWithIconItem, string \| JSXElementConstructor<any>> \| ReactElement<ITextWithIconItem, string \| JSXElementConstructor<...>>[]		Допустимый дочерний компонент

TextWithIconItem

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

Примеры и код

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

Фон для иконки

Для фона со значением no нужно использовать иконки размера L (фактический размер на странице должен быть 40px или 100%)

Для фона со значениями stroke или gray нужно использовать иконки размера M (фактический размер на странице должен быть 32px или 100%)

<TextWithIcon>
  <TextWithIconItem
      iconBackground="no"
      text={['Привлечение новых клиентов и повышение лояльности действующих']}
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      iconBackground="stroke"
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeM style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      iconBackground="gray"
      text="Понятная и простая реализация партнерстваих"
      icon={<StarSizeM style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

HTML-теги и спецсимволы

В свойстве text поддерживаются некоторые HTML-теги: "<br>, <b>, <font color>, <a href>" и спецсимвол &nbsp.

<TextWithIcon>
  <TextWithIconItem
      text="Описание&nbspдолжно <a href='https://moscow.megafon.ru'>быть</a> <font color='#731982'>примерно</font> не более <b>130</b> символов.<br>Пишите содержательно, кратко и не будет проблем с текстовым контентом."
      icon={<HeartSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Специальные предложения для ваших клиентов"
      icon={<StarSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
  <TextWithIconItem
      text="Понятная и простая реализация партнерстваих"
      icon={<LikeSizeL style={{ fill: '#00B956', width: '100%', height: '100%' }} />}
  />
</TextWithIcon>

Prop name	Type	Default	Description
classes	{ icon?: string; text?: string; }	{}	Дополнительные классы для внутренних элементов
text*	string \| string[]		Текст
icon*	ReactNode		Иконка
iconBackground	"no" \| "stroke" \| "gray"	no	Фон для иконки
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
className	string		Дополнительный класс для корневого элемента