PictureWithDescription

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

Примеры и код

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

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

<PictureWithDescription pictureUrl={Image1}>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

Встроенный заголовок

Показать код

<PictureWithDescription pictureUrl={Image1} title="Личный кабинет">
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

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

Показать код

<PictureWithDescription pictureUrl={Image1} pictureAlign='right'>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

Небольшое количество контента

Показать код

<PictureWithDescription pictureUrl={Image2}>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
</PictureWithDescription>

Выравнивание текста по верхнему краю

Показать код

<PictureWithDescription pictureUrl={Image2} isTextTopAlign>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
</PictureWithDescription>

Prop name	Type	Default	Description
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительный класс для корневого элемента
classes	{ root?: string \| undefined; title?: string \| undefined; } \| undefined	{}	Дополнительные классы для корневого и внутренних элементов
title	ReactNode \| ReactNode[]		Заголовок
pictureUrl*	string		Url изображения
pictureAlign	PictureAlignTypesType \| undefined	left	Расположение изображения
pictureAlt	string \| undefined		Значение тега alt для изображения
isTextTopAlign	boolean \| undefined		Выравнивание текста по верхнему краю
children	ReactNode		Дочерний элемент компонента