Gravity UI – UIKit

import {Text} from '@gravity-ui/uikit';

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

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

some textsome textsome text

import {Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Text variant="body-1">some text</Text>
            <Text variant="caption-2">some text</Text>
            <Text variant="display-3">some text</Text>
        </>
    );
}

import {Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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!

import {Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <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>
                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>
        </>
    );
}

import {Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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>
                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.

import {Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <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>
        </>
    );
}

import {Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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.

import {Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <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>
        </>
    );
}

import {Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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

import {Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Text color="info">some text</Text>
            <Text color="positive">some text</Text>
            <Text color="warning">some text</Text>
        </>
    );
}

import {Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Text color="info">some text</Text>
            <Text color="positive">some text</Text>
            <Text color="warning">some text</Text>
        </>
    );
}

Свойства

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

Text

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

§Многоточие

§Пробел

§Перенос слов