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		Кнопка
extraButton	ButtonType		Дополнительная кнопка
pictureMask	"mac-book" \| "none"	none	Маска
children*	ReactNode		Дочерние элементы
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
className	string		Дополнительный класс для корневого элемента
classes	{ root?: string; button?: string; extraButton?: string; }		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; button?: Record<string, string>; extraButton?: Record<string, string>; image?: Record<string, string>; mask?: Record<string, string>; buttonsWrapper?: Record<...>; }		Дополнительные 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;
};