PageTitle

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

Примеры и код

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

Демо данныеconst breadcrumbs = [
    {
        title: 'Тарифы',
        href: '#',
    },
    {
        title: 'Управляй !',
        href: '#',
    },
    {
        title: 'Менеджер',
        href: '#',
    },
];

const badge = 'VIP';

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

<PageTitle title="Копилка" />

Хлебные крошки

Хлебные крошки не отображаются на мобильном разрешении.

<PageTitle title="Копилка" breadcrumbs={breadcrumbs} />

Бейджи

<PageTitle title="Копилка" badge={badge} />

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

<PageTitle title="Копилка" description="Пример текста с описанием страницы" isFullWidth={false} />

Ограничение по ширине

<PageTitle
      title="Длинный заголовок, который нужно ограничить по ширине"
      description="Пример длинного текста с описанием страницы. Сервисы и полезные материалы для решения бизнес-задач самозанятых, индивидуального и малого предпринимательства"
      breadcrumbs={breadcrumbs}
      badge={badge}
      isFullWidth={false}
  />

Уменьшенный отступ сверху

При использовании без хлебных крошек и бейджа.

<PageTitle title="Копилка" marginTop="small" />

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; breadcrumbs?: Record<string, string>; breadcrumbsLink?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
title*	ReactNode \| ReactNode[]		Текст заголовка
description	ReactNode \| ReactNode[]		Описание
breadcrumbs	ItemType[]		Хлебные крошки
badge	string		Текст бейджа
isFullWidth	boolean	true	Растягивание компонента на всю доступную ширину
hasBreadcrumbsMicrodata	boolean	false	Включить микроразметку для хлебных крошек
marginTop	"default" \| "small"	default	Отступ сверху
className	string		Класс для корневого элемента
classes	{ title?: string; breadcrumbs?: string; }	{}	Дополнительные классы для внутренних элементов
rootRef	RefObject<HTMLDivElement>		Ссылка на корневой элемент