ContentView

import { ContentView } from '@megafon/ui-core';

Примеры и код

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

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

<ContentView title="Что-то пошло не так" type="error" buttonParams={{ text: 'Обновить' }} />

С текстом и ссылкой

<ContentView
  title="Что-то пошло не так"
  type="error"
  buttonParams={{ text: 'Обновить' }}
  linkParams={{ text: 'Перейти' }}
>
  Нажмите кнопку или зайдите позже
</ContentView>

С кнопкой и лоадером и отключенной ссылкой

<ContentView
  title="Что-то пошло не так"
  type="error"
  buttonParams={{ text: 'Обновить', showLoader: true }}
  linkParams={{ text: 'Перейти', disabled: true }}
>
  Нажмите кнопку или зайдите позже
</ContentView>

Тип встроенного изображения

<DemoContentViewWrapper>
  {imageType => (
      <ContentView title={"Тип " + imageType} buttonParams={{ text: 'Обновить' }} type={imageType}>
          Нажмите кнопку или зайдите позже
      </ContentView>
  )}
</DemoContentViewWrapper>

Код DemoContentViewWrapperexport const DemoContentViewWrapper: React.FC = ({ children }: { children: (imageType: string) => void }) => {
    const imageTypes = ['alarm', 'empty', 'error', 'fail', 'searchNoResult', 'submit', 'success', 'update', 'waiting'];

    return (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '80px' }}>
            {imageTypes.map(imageType => children(imageType))}
        </div>
    );
};

С кастомным изображением

<ContentView
  title="Что-то пошло не так"
  buttonParams={{ text: 'Обновить' }}
  linkParams={{ text: 'Перейти' }}
  src={smallImg}
>
  Нажмите кнопку или зайдите позже
</ContentView>

Полноэкранный режим

<div style={{ height: '500px' }}>
  <ContentView
      title="Что-то пошло не так"
      type="error"
      buttonParams={{ text: 'Обновить' }}
      linkParams={{ text: 'Перейти' }}
      isFullscreen
  >
      Нажмите кнопку или зайдите позже
  </ContentView>
</div>

С html-тегами

<ContentView
      title="Что-то пошло<br />не так"
      type="error"
  >
      Нажмите кнопку<br />или зайдите позже
  </ContentView>

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
classes	{ title?: string; button?: string; link?: string; bgImage?: string; }	{}	Дополнительные классы для внутренних элементов
title*	string		Заголовок
type	"waiting" \| "error" \| "submit" \| "success" \| "fail" \| "update" \| "alarm" \| "empty" \| "searchNoResult"		Тип встроенного изображения
alt	string		Значение тега alt для изображения
src	string		Ссылка на изображение
buttonParams	ElementType		Параметры кнопки
linkParams	ElementType		Параметры ссылки
isFullscreen	boolean		Полноэкранный режим
dataAttrs	{ root?: Record<string, string>; button?: Record<string, string>; link?: Record<string, string>; bgImage?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам