TextBox

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

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

Content<Header as="h3" margin>
    В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:
</Header>
<Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими
    текстовыми сообщениями. Вы можете отправить SMS-сообщение даже на городской
    телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в
    голосовое и зачитает его адресату.
</Paragraph>
<Header as="h3" margin>
    В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:
</Header>
<Header as="h5" margin>Путешествуй без забот</Header>
<TextBoxPicture url={Image} />
<Paragraph>
    Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона,
    минуты и SMS по России.
    <Link href="https://megafon.ru">Click me</Link>
</Paragraph>
<List>
    <ListItem>Тарифы</ListItem>
    <ListItem>Интернет</ListItem>
    <ListItem>Связь</ListItem>
    <ListItem>Услуги</ListItem>
</List>
<Paragraph size="small">
    Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам
</Paragraph>

ContentForExampleWithPicture<Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими
    текстовыми сообщениями. Вы можете отправить SMS-сообщение даже на городской
    телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в
    голосовое и зачитает его адресату.
</Paragraph>

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

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в голосовое и зачитает его адресату.

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox>
  <Content />
</TextBox>

<TextBox>
  <Content />
</TextBox>

Горизонтальное выравнивание текста по центру

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox textCenter={true}>
  <Content />
</TextBox>

<TextBox textCenter={true}>
  <Content />
</TextBox>

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

По умолчанию

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox isFullWidth={false}>
  <Content />
</TextBox>

<TextBox isFullWidth={false}>
  <Content />
</TextBox>

Горизонтальное выравнивание текста по центру

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox isFullWidth={false} textCenter={true}>
  <Content />
</TextBox>

<TextBox isFullWidth={false} textCenter={true}>
  <Content />
</TextBox>

Горизонтальное выравнивание компонента по центру

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox isFullWidth={false} centeringWithLimitedWidth={true}>
  <Content />
</TextBox>

<TextBox isFullWidth={false} centeringWithLimitedWidth={true}>
  <Content />
</TextBox>

Горизонтальное выравнивание и компонента, и текста по центру

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Путешествуй без забот

Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.Click me

Тарифы
Интернет
Связь
Услуги

Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам

<TextBox
  isFullWidth={false}
  centeringWithLimitedWidth={true}
  textCenter={true}
>
  <Content />
</TextBox>

<TextBox
  isFullWidth={false}
  centeringWithLimitedWidth={true}
  textCenter={true}
>
  <Content />
</TextBox>

Изображение

Увеличены вертикальные отступы

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-vertical" />
  <ContentForExampleWithPicture />
</TextBox>

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-vertical" />
  <ContentForExampleWithPicture />
</TextBox>

Увеличен нижний отступ

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-bottom" />
  <ContentForExampleWithPicture />
</TextBox>

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-bottom" />
  <ContentForExampleWithPicture />
</TextBox>

Увеличены верхний отступы

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" />
  <ContentForExampleWithPicture />
</TextBox>

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" />
  <ContentForExampleWithPicture />
</TextBox>

Картинка без рамки

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" disableBorder />
  <ContentForExampleWithPicture />
</TextBox>

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" disableBorder />
  <ContentForExampleWithPicture />
</TextBox>

Компонент TextWithIcon

Заголовок после компонента TextWithIcon

Заголовок компонента TextWithIcon

<TextBox>
  <Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона
    небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже
    на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
    сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <Header>Заголовок после компонента TextWithIcon</Header>
  <Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона
    небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже
    на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
    сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <TextBoxPicture url={Image} margin="big-top" />
  <TextWithIcon
    items={textWithIconItems}
    title="Заголовок компонента TextWithIcon"
  />
</TextBox>

<TextBox>
  <Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона
    небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже
    на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
    сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <Header>Заголовок после компонента TextWithIcon</Header>
  <Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона
    небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже
    на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
    сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <TextBoxPicture url={Image} margin="big-top" />
  <TextWithIcon
    items={textWithIconItems}
    title="Заголовок компонента TextWithIcon"
  />
</TextBox>