Text

variant
text
ellipsis
whiteSpace
wordBreak
color
import {Text} from '@gravity-ui/uikit';

Вариант шрифта (variant)

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

some textsome textsome text
<Text variant="body-1">some text</Text>
<Text variant="caption-2">some text</Text>
<Text variant="display-3">some text</Text>

Многоточие

Это свойство позволяет скрывать переполняющий текст:

false — используется по умолчанию;

true — скрытый переполняющий текст будет заменен на многоточие ().

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!
<Text ellipsis={false}>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>
<Text ellipsis={true}>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>

Пробел

Соответствует CSS-свойству white-space. Может принимать значения nowrap или break-spaces.

Lorem ipsum dolor sit, amet consectetur adipisicing elit.Lorem ipsum dolor sit, amet consectetur adipisicing elit.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<Text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>
<Text whiteSpace={"nowrap"}>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>
<Text whiteSpace={"break-spaces"}>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>

Перенос слов

Соответствует CSS-свойству word-break. Единственное значение — break-all. | break-word.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!
<Text>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>
<Text wordBreak="break-all">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>

Цвет

Задает цвет текста. Доступные цвета: primary, complementary, secondary, hint, info, info-heavy, positive, positive-heavy, warning, warning-heavy, danger, danger-heavy, utility, utility-heavy, misc, misc-heavy, brand, link, link-hover, link-visited, link-visited-hover, dark-primary, dark-complementary, dark-secondary, light-primary, light-complementary, light-secondary, light-hint, inverted-primary, inverted-complementary, inverted-secondary и inverted-hint.

some textsome textsome text
<Text color="info">some text</Text>
<Text color="positive">some text</Text>
<Text color="warning">some text</Text>

Свойства

ИмяОписаниеТипЗначение по умолчанию
childrenТекстовое содержимое.React.ReactNode
classNameHTML-атрибут class.string
idHTML-атрибут id.string
asПозволяет переопределить HTML-тег по умолчанию.React.ElementType<any>
styleHTML-атрибут style.React.CSSProperties
variantШрифт текста.string"body-1"
ellipsisСкрытый переполняющий текст будет заменен на многоточие.boolean
ellipsisLinesКоличество полных строк текста, после которых содержимое будет обрезано.number
whiteSpaceCSS-свойство white-space."nowrap" "break-spaces"
wordBreakCSS-свойство word-break."break-all" "break-word"
colorЦвет текста.string (см. значения в разделе Цвет)
qaHTML-атрибут data-qa, используется для тестирования.string