Text
Text 组件用于创建各种文本元素，提供一致的排版样式和灵活的定制选项。该组件适用于需要统一文本样式的场景，如段落、提示文本、标签等。
Props
align
文本对齐方式。
左对齐文本
居中对齐文本
右对齐文本
两端对齐文本
左对齐文本 (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 元素类型。
这是 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
自定义类名。
自定义背景和圆角
自定义颜色和下划线
自定义样式文本
---
/**
* @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
文本颜色。
主要颜色文本
次要颜色文本
强调色文本
柔和色文本
默认颜色文本 (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
文本大小。
超小文本
小文本
中等文本
大文本
超大文本
超小文本 (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
是否截断超长文本。
这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号，这是一段很长的文本，将会被截断并显示省略号...
这是一段较长的文本，不会被截断，将完整展示以对比截断效果。
这是一段很长的文本，将会被截断并显示省略号...
---
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
字体粗细。
细体文本
常规文本
中等粗文本
半粗体文本
粗体文本
细体文本 (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
是否使用斜体。
斜体文本
非斜体文本
正常文本
斜体文本
---
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
是否使用下划线。
带下划线文本
无下划线文本
正常文本
下划线文本
---
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
内联样式。
使用内联样式的文本
内联样式文本
---
/**
* @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>