Text

The Text component is used to create various text elements, providing consistent typography styles and flexible customization options. This component is suitable for scenarios that require unified text styling, such as paragraphs, prompt text, labels, etc.

Basic Usage

这是一段普通文本

<Text>这是一段普通文本</Text>

Different Sizes

超小文本

小文本

中等文本

大文本

超大文本

<Text size="xs">超小文本</Text>
<Text size="sm">小文本</Text>
<Text size="md">中等文本</Text>
<Text size="lg">大文本</Text>
<Text size="xl">超大文本</Text>

Text Colors

主要颜色文本

次要颜色文本

强调色文本

柔和色文本

<Text color="primary">主要颜色文本</Text>
<Text color="secondary">次要颜色文本</Text>
<Text color="accent">强调色文本</Text>
<Text color="muted">柔和色文本</Text>

Font Weight

细体文本

常规文本

中等粗文本

半粗体文本

粗体文本

<Text weight="light">细体文本</Text>
<Text weight="normal">常规文本</Text>
<Text weight="medium">中等粗文本</Text>
<Text weight="semibold">半粗体文本</Text>
<Text weight="bold">粗体文本</Text>

Text Alignment

左对齐文本

居中对齐文本

右对齐文本

两端对齐文本

<Text align="left">左对齐文本</Text>
<Text align="center">居中对齐文本</Text>
<Text align="right">右对齐文本</Text>
<Text align="justify">两端对齐文本</Text>

Text Truncation

这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号...

<Text truncate>这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号...</Text>

Custom Styles

自定义背景和圆角

自定义颜色和下划线

<Text class="cosy:bg-yellow-100 cosy:px-2 cosy:py-1 cosy:rounded">自定义背景和圆角</Text>
<Text class="cosy:text-red-500 cosy:underline">自定义颜色和下划线</Text>