Text

Отображает стилизованный текст

В качестве входных данных получает неформатированный текст и отображает его в стиле согласно свойству Mode. Текст может автоматически обрезаться по размеру контейнера, в котором текст расположен, с добавлением многоточия. В таком случае доступно отображение подсказки с полным текстом.

<Text
    Max={1}
    CSS={['mb-24']}
    AutoTooltip={true}
    AutoTooltipLineClamp={5}
    Value="На этом тексте автоматически показывается тултип, если текст не укладывается в ширину..."
  />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
Align	Горизонтальное выравнивание	enum	Left	`Left` - По левому краю `Right` - По правому краю `Center` - По центру
AutoHint	Признак отображения подсказки при наличии многоточия	boolean	False
AutoTooltip	Признак отображения подсказки при наличии многоточия	boolean	False
AutoTooltipLineClamp	Количество строк в подсказке	number	2
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет шрифта текста: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5	string
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
FullWidth	Признак растягивания текста по ширине родительского компонента	boolean	False
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
Max	Максимальное количество строк, после заполнения которых текст заменяется на многоточие	number	0
Mode	Размер, начертание, гарнитура, насыщенность шрифта текста	enum	Span	`Medium_32` - Шрифт средний по уровню жирности; в основном используется для отображения чисел на информационных панелях `Medium_20` - Размер шрифта для заголовка первого уровня `Medium_18` - Размер шрифта для заголовка второго уровня `Medium_16` - Размер шрифта для заголовка третьего уровня `Regular_14` - Размер шрифта для текста параграфа `Regular_14_2` - Размер шрифта для текста `Medium_14` - Размер шрифта для надписи на кнопке `Regular_12` - Размер шрифта для подписи к компонентам, например, для подсказки или текста ошибки `Bold_12` - Жирный шрифт для отображения подсказки `Medium_12` - Размер шрифта для отображения подсказки `H1` - Заголовок первого уровня `H2` - Заголовок второго уровня `H3` - Заголовок третьего уровня `H4` - Заголовок четвертого уровня `P` - Параграф `Strong` - Жирный текст `Span` - Текстовый блок для группировки в целях стилизации `Mono` - Моноширный шрифт; в основном используется для отображения системной информации, фрагментов кода `Small` - Уменьшение размера шрифта на одну условную единицу `H2M` - Сброс значения свойства margin-top CSS `Label` - Метка для связи текста и элемента формы (&ltinput&gt, &ltselect&gt, &lttextarea&gt)
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
ShowButton	Признак отображения кнопки "Ещё/Свернуть"	boolean	False
ShowButtonHide	Надпись на кнопке с функцией "Свернуть"	string	Свернуть
ShowButtonReveal	Надпись на кнопке с функцией "Ещё"	string	Ещё
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Value	Текст	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True
WhiteSpace	Способ отображения пробелов между словами (свойство white-space CSS)	string

Примеры

Данные:

  "text": "включена кнопка на текста мало"
}

JSX:

<Group Mode="ColumnWithScroll" Height="80vh">
    <Text Mode="Medium_32" Value="12345689" CSS={['mb-8']} />
    <Text Mode="Medium_20" Value="Самый главный заголовок" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Medium_18" Value="Второстепенный заголовок" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Medium_16" Value="Дополнительный заголовок" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Regular_14" Value="Основной текст" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Regular_14_2" Value="Пример текста" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Medium_14" Value="Кнопка" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Regular_12" Value="Подпись к компонентам (подсказка, ошибка)" CSS={['mt-8', 'mb-8']} />
    <Text Mode="Bold_12" Value="5" CSS={['mt-8', 'mb-8']} />
    <Text
      Mode="Medium_12"
      Value="Подсказка"
      CSS={['mt-8', 'mb-8']}
      Badge={{
        counter: 777,
        position: "post",
        color: "default",
      }} 
    />
    <Text Mode="Regular_14_2" Value="Высота текстового контейнера (H) уменьшена на 2px по сравнению со стандартным, и не расширяется в зависимости от использования, например рядом с иконкой 24х24, а центрируется относительно объекта. Приведенные размеры, начертание и высота контейнера используется для разработки всех компонентов." CSS={['mt-8', 'mb-8']}  />
  </Group>

Свойства​

Примеры​

Свойства

Примеры