logo
English

导航菜单

Documents

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.

Props

align

Text alignment.

左对齐文本

居中对齐文本

右对齐文本

两端对齐文本

左对齐文本 (left)

居中对齐文本 (center)

右对齐文本 (right)

两端对齐文本 (justify)

---



import { Text } from "@coffic/cosy-ui";
---

<Text align="left">左对齐文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text align="center">居中对齐文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text align="right">右对齐文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text align="justify">两端对齐文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text align="left">左对齐文本 (left)</Text>
    <Text align="center">居中对齐文本 (center)</Text>
    <Text align="right">右对齐文本 (right)</Text>
    <Text align="justify">两端对齐文本 (justify)</Text>
  </div>
</template>

as

HTML element to render.

这是 span 渲染的文本
这是 div 渲染的文本

这是 h1 渲染的文本

段落元素 (p)

行内元素 (span)
块级元素 (div)
强调元素 (strong)
---



import { Text } from "@coffic/cosy-ui";
---

<Text as="span">这是 span 渲染的文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text as="div">这是 div 渲染的文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text as="h1">这是 h1 渲染的文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text as="label">这是 label 渲染的文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text as="p">段落元素 (p)</Text>
    <Text as="span">行内元素 (span)</Text>
    <Text as="div">块级元素 (div)</Text>
    <Text as="strong">强调元素 (strong)</Text>
  </div>
</template>

class

Custom CSS class.

自定义背景和圆角

自定义颜色和下划线

自定义样式文本

---



/**
 * @component TextCustomStyle
 * @description Text 组件自定义样式用法示例。
 */
import { Text } from "@coffic/cosy-ui";
---

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

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Text class="cosy:text-red-500 cosy:font-bold">自定义样式文本</Text>
</template>

color

Text color.

主要颜色文本

次要颜色文本

强调色文本

柔和色文本

默认颜色文本 (default)

主要颜色文本 (primary)

次要颜色文本 (secondary)

强调色文本 (accent)

柔和色文本 (muted)

---



import { Text } from "@coffic/cosy-ui";
---

<Text color="primary">主要颜色文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text color="secondary">次要颜色文本</Text>



---



import { Text } from "@coffic/cosy-ui";
---

<Text color="accent">强调色文本</Text>



---



import { Text } from "@coffic/cosy-ui";
---

<Text color="muted">柔和色文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text color="default">默认颜色文本 (default)</Text>
    <Text color="primary">主要颜色文本 (primary)</Text>
    <Text color="secondary">次要颜色文本 (secondary)</Text>
    <Text color="accent">强调色文本 (accent)</Text>
    <Text color="muted">柔和色文本 (muted)</Text>
  </div>
</template>

size

Text size.

超小文本

小文本

中等文本

大文本

超大文本

超小文本 (xs)

小文本 (sm)

中等文本 (md)

大文本 (lg)

超大文本 (xl)

---



import { Text } from "@coffic/cosy-ui";
---

<Text size="xs">超小文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text size="sm">小文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text size="md">中等文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text size="lg">大文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text size="xl">超大文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text size="xs">超小文本 (xs)</Text>
    <Text size="sm">小文本 (sm)</Text>
    <Text size="md">中等文本 (md)</Text>
    <Text size="lg">大文本 (lg)</Text>
    <Text size="xl">超大文本 (xl)</Text>
  </div>
</template>

truncate

Whether to truncate long text.

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

这是一段较长的文本，不会被截断，将完整展示以对比截断效果。

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

---



import { Text } from "@coffic/cosy-ui";
---

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

---



import { Text } from "@coffic/cosy-ui";
---

<Text>这是一段较长的文本，不会被截断，将完整展示以对比截断效果。</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:w-64">
    <Text truncate>这是一段很长的文本，将会被截断并显示省略号...</Text>
  </div>
</template>

weight

Font weight.

细体文本

常规文本

中等粗文本

半粗体文本

粗体文本

细体文本 (light)

常规文本 (normal)

中等粗文本 (medium)

半粗体文本 (semibold)

粗体文本 (bold)

---



import { Text } from "@coffic/cosy-ui";
---

<Text weight="light">细体文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text weight="normal">常规文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text weight="medium">中等粗文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text weight="semibold">半粗体文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text weight="bold">粗体文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text weight="light">细体文本 (light)</Text>
    <Text weight="normal">常规文本 (normal)</Text>
    <Text weight="medium">中等粗文本 (medium)</Text>
    <Text weight="semibold">半粗体文本 (semibold)</Text>
    <Text weight="bold">粗体文本 (bold)</Text>
  </div>
</template>

italic

Whether to use italic style.

斜体文本

非斜体文本

正常文本

斜体文本

---



import { Text } from "@coffic/cosy-ui";
---

<Text italic>斜体文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text>非斜体文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text>正常文本</Text>
    <Text italic>斜体文本</Text>
  </div>
</template>

underline

Whether to use underline.

带下划线文本

无下划线文本

正常文本

下划线文本

---



import { Text } from "@coffic/cosy-ui";
---

<Text underline>带下划线文本</Text>

---



import { Text } from "@coffic/cosy-ui";
---

<Text>无下划线文本</Text>

<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div class="cosy:space-y-4">
    <Text>正常文本</Text>
    <Text underline>下划线文本</Text>
  </div>
</template>

style

Inline style.

使用内联样式的文本

内联样式文本

---



/**
 * @component TextStyle
 * @description Text 组件 style 内联样式示例。
 */
import { Text } from "@coffic/cosy-ui";
---

<Text style="color: #16a34a; font-weight: 600;">使用内联样式的文本</Text>



<script setup lang="ts">
import { Text } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Text :style="'color: blue; font-weight: bold;'">内联样式文本</Text>
</template>

搜索