PictureBox

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

Примеры и код

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

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


  <PictureBox
      image={{ src: image1, alt: 'Image' }}
  >
      <TextBox>
          <Header as="h2" margin>Личный кабинет</Header>
          <Paragraph as="h2">
              Это пример возможного текста. Создайте новый компонент текста в своем файле и просто замените его. 
              Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России
          </Paragraph>
      </TextBox>
  </PictureBox>

Изображение справа

Показать код


  <PictureBox
      image={{ src: image1, alt: 'Image', align: 'right' }}
  >
      <TextBox>
          <Header as="h2" margin>Личный кабинет</Header>
          <Paragraph as="h2">
              Это пример возможного текста. Создайте новый компонент текста в своем файле и просто замените его. 
              Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России
          </Paragraph>
      </TextBox>
  </PictureBox>

Маска

Показать код


  <PictureBox
      image={{ src: image2, alt: 'Image' }}
      pictureMask="mac-book"
  >
      <TextBox>
          <Header as="h2" margin>Личный кабинет</Header>
          <Paragraph as="h2">
              Это пример возможного текста. Создайте новый компонент текста в своем файле и просто замените его. 
              Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России
          </Paragraph>
      </TextBox>
  </PictureBox>

Кнопки

Показать код


  <PictureBox
      image={{ src: image1, alt: 'Image' }}
      button={{ title: 'Заказать', href: '/', target: '_blank', rel: 'nofollow' }}
      extraButton={{ title: 'Побронее', href: '/', target: '_blank', rel: 'nofollow' }}
  >
      <TextBox>
          <Header as="h2" margin>Личный кабинет</Header>
          <Paragraph as="h2">
              Это пример возможного текста. Создайте новый компонент текста в своем файле и просто замените его. 
              Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России
          </Paragraph>
      </TextBox>
  </PictureBox>

Дополнительные элементы

Показать код


  <PictureBox
      image={{ src: image1, alt: 'Image' }}
      button={{ title: 'Заказать', href: '/', target: '_blank', rel: 'nofollow' }}
      extraButton={{ title: 'Побронее', href: '/', target: '_blank', rel: 'nofollow' }}
  >
      <TextBox>
          <Header as="h2" margin>Личный кабинет</Header>
          <Paragraph as="h2">
              Это пример возможного текста. Создайте новый компонент текста в своем файле и просто замените его. 
              Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России
          </Paragraph>
          <AudioPlayer position="left" audioTitle="Пример разговора" audioSrc='https://moscow.megafon.ru/download/~federal/lp/agent_eva/eva_zvonok_iz_ozona.mp3' />
          <NotificationBox type="info" shadowLevel="default">
              Архивные тарифы закрыты для перехода и подключения
          </NotificationBox>
      </TextBox>
  </PictureBox>

Prop name	Type	Default	Description
image*	ImageType		Изображение
button	ButtonType \| undefined		Кнопка
extraButton	ButtonType \| undefined		Дополнительная кнопка
pictureMask	"none" \| "mac-book" \| undefined	none	Маска
children*	ReactNode		Дочерние элементы
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительный класс для корневого элемента
classes	{ root?: string \| undefined; button?: string \| undefined; extraButton?: string \| undefined; } \| undefined		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string> \| undefined; button?: Record<string, string> \| undefined; extraButton?: Record<string, string> \| undefined; image?: Record<...> \| undefined; mask?: Record<...> \| undefined; buttonsWrapper?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам

type ImageType = {
    src: string;
    src2x?: string;
    align?: 'right' | 'left';
    alt?: string;
};

type ButtonType = {
    title?: string;
    href?: string;
    target?: '_self' | '_blank';
    rel?: string;
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};