BenefitsPictures

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

Примеры и код

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

Демо данныеconst items = [
    {
        title: 'Интернет',
        text: 'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
        img: image.png,
    },
    {
        title: 'Интернет',
        text: 'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
        img: image.png,
    },
];

Выравнивание по левому краю

Большое расстояние между бенефитами

<BenefitsPictures items={twoItems} />

<BenefitsPictures items={threeItems} />

<BenefitsPictures items={fourItems} />

Среднее расстояние между бенефитами

<BenefitsPictures gridGap="medium" items={twoItems} />

<BenefitsPictures gridGap="medium" items={threeItems} />

<BenefitsPictures gridGap="medium" items={fourItems} />

Выравнивание по центру

Большое расстояние между бенефитами

<BenefitsPictures align="center" items={twoItems} />

<BenefitsPictures align="center" items={threeItems} />

<BenefitsPictures align="center" items={fourItems} />

Среднее расстояние между бенефитами

<BenefitsPictures gridGap="medium" align="center" items={twoItems} />

<BenefitsPictures gridGap="medium" align="center" items={threeItems} />

<BenefitsPictures gridGap="medium" align="center" items={fourItems} />

Выравнивание текста по левому краю независимо от выравнивания бенефитов

<BenefitsPictures align="center" textAlign="left" items={twoItems} />

Выравнивание текста по центру независимо от выравнивания бенефитов

<BenefitsPictures align="left" textAlign="center" items={twoItems} />

Выравнивание изображения по левому краю независимо от выравнивания бенефитов

<BenefitsPictures align="center" imgAlign="left" items={twoItemsWithSmallImg} />

Выравнивание изображения по центру независимо от выравнивания бенефитов

<BenefitsPictures align="left" imgAlign="center" items={twoItemsWithSmallImg} />

Без заголовка

<BenefitsPictures items={twoItemsWithoutTitle} />

Без текста

<BenefitsPictures items={twoItemsWithoutText} />

Prop name	Type	Default	Description
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
items*	IBenefit[]		Данные для бенефитов
align	"left" \| "center"	left	Горизонтальное выравнивание бенефитов
textAlign	"left" \| "center" \| "auto"	auto	Горизонтальное выравнивание текста
imgAlign	"left" \| "center" \| "auto"	auto	Горизонтальное выравнивание изображения
gridGap	GridGutterSize	large	Расстояние между бенефитами
className	string		Дополнительный css класс для корневого элемента
classes	{ root?: string; item?: string; }	{}	Дополнительные css классы для корневого и внутренних элементов

interface IBenefit {
    /** Заголовок бенефита */
    title?: string;
    /** Основной текст в бенефите */
    text?: string | React.ReactNode | React.ReactNode[];
    /** Изображение */
    img: string;
    /** Значение тега alt для изображения */
    alt?: string;
}