Перейти к основному содержимому

Text

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

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

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

Свойства​

Align​

Горизонтальное выравнивание

Тип: enum

Значение по умолчанию: Left

Возможные значения:

Left - По левому краю Right - По правому краю Center - По центру

AutoHint​

Признак отображения подсказки при наличии многоточия

Тип: boolean

AutoTooltip​

Признак отображения подсказки при наличии многоточия

Тип: boolean

AutoTooltipLineClamp​

Количество строк в подсказке

Тип: number

Значение по умолчанию: 2

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

Color​

Цвет шрифта текста: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5

Тип: string

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

FullWidth​

Признак растягивания текста по ширине родительского компонента

Тип: boolean

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

Max​

Максимальное количество строк, после заполнения которых текст заменяется на многоточие

Тип: number

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 - Метка для связи текста и элемента формы (<input>, <select>, <textarea>)

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

ShowButton​

Признак отображения кнопки "Ещё/Свернуть"

Тип: boolean

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>