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

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