Gravity UI – UIKit

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。

<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`
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)

§省略号

§空白处理

§断词

§颜色

§属性

字体变体 (`variant`)

省略号

空白处理

断词

颜色

属性