TechUI Docs

简中

EN

简中

EN

主题

文字渐变 ​

⭐明星组件
🏅原创

TextGradient 用于渲染带有渐变色填充效果的文字。相比于普通的 CSS 写法，它封装了复杂的兼容性处理，支持线性、径向、锥形渐变，并提供了灵活的 JS Props 和 CSS Variables 两种配置方式。

基础用法 ​

通过 Props 配置 ​

最直接的方式是通过 colors 属性传入颜色数组。组件默认使用线性渐变 (linear)。

vue
<script setup>
import { reactive } from 'vue'
const myColors = ['#6366f1', '#a855f7', '#ec4899'] // Indigo -> Purple -> Pink
</script>

<template>
  <div class="demo-box">
    <TuiTextGradient :colors="['blue', 'cyan']">
      TechUI Design System
    </TuiTextGradient>

    <TuiTextGradient 
      :colors="myColors" 
      :angle="90" 
      :fontSize="32"
    >
      Colorful Text Effect
    </TuiTextGradient>
  </div>
</template>

渐变类型 ​

通过 gradientType 切换渐变模式，支持 linear (线性), radial (径向), conic (锥形)。

vue
<template>
  <TuiTextGradient 
    gradientType="radial" 
    :colors="['#FFD700', '#FF8C00']"
  >
    Radial Gradient Text
  </TuiTextGradient>
</template>

当然，我非常熟悉。TuiColors 是 TechUI 强大的色彩系统核心，配合 $c 工具函数和 LESS 变量，可以极大简化颜色管理和渐变生成的复杂度。

以下是针对 TextGradient 文字渐变 文档的增补内容，分别在 基础用法 和 CSS 变量 章节中增加了结合 TuiColors 的高级用法。

结合 TuiColors (JS) ​

TextGradient 组件可以完美配合 @techui/colors 库使用。通过导入核心工具 $c，您可以轻松调用系统预设色阶，或利用 $c.scale 方法生成高跨度的平滑渐变数组。

这在生成彩虹色、热力图色或需要跨越多个色系的复杂文字渐变时非常有用。

vue
<script setup>
import { computed } from 'vue'
// 按需导入 TuiColors 工具
import { $c } from "@techui/colors" 

// 创建一个跨越 红->橙->青->紫 的5阶复杂渐变
// 预设变量: $c.rel5 (Red Light 5), $c.orl5 (Orange Light 5)...
const complexColors = computed(() => {
  // $c.scale 会自动计算中间的插值颜色
  return $c.scale([$c.rel5, $c.orl5, $c.cyl5, $c.pul5], 5)
})
</script>

<template>
  <div class="demo-box">
    <TuiTextGradient 
      :colors="complexColors" 
      :fontSize="36"
      fontWeight="bold"
    >
      TuiColors Scale Gradient
    </TuiTextGradient>
  </div>
</template>

$c全局或按需引入

关于如何全局或者按需引入@techui/colors，请跳转到 开始-额外章节-JS中使用颜色表 章节查看

CSS 变量控制 ​

除了 Props，组件深度支持通过 CSS 变量进行样式覆盖。这种方式在结合 class 或 style 动态绑定时非常强大，可以避免过多的 JS 计算。

快速覆盖颜色 (推荐) ​

如果您只需要修改线性渐变的起始色、结束色或角度，可以使用简写变量。

vue
<template>
  <TuiTextGradient class="my-gradient-text">
    使用 CSS 变量定义颜色
  </TuiTextGradient>
</template>

<style>
.my-gradient-text {
  /* 定义起始色 */
  --tui-txtg-c1: var(--danger-base);
  /* 定义结束色 */
  --tui-txtg-c2: var(--warning-base);
  /* 定义角度 */
  --tui-txtg-deg: 180deg;
  /* 定义字体大小 */
  --tui-txtg-fz: 28px;
}
</style>

完全自定义背景 (高级) ​

如果您需要极其复杂的渐变（如多重渐变、特殊的径向位置），可以通过 --tui-txtg-bg 直接覆盖整个 background 属性。

vue
<template>
  <TuiTextGradient class="complex-gradient">
    完全自定义 CSS Background
  </TuiTextGradient>
</template>

<style>
.complex-gradient {
  /* 直接编写完整的 CSS gradient 语法 */
  --tui-txtg-bg: radial-gradient(circle at center, #ff0000, #0000ff);
  
  /* 同时也可以定义字体属性 */
  --tui-txtg-fw: bold;
}
</style>

结合 TuiColors (LESS) ​

在样式表中，您可以直接使用 TuiColors 提供的 LESS 变量（如 @rel5, @bll6 等）来映射组件所需的 CSS 变量。这使得文字渐变能够完美融入当前的主题系统。

全局Less变量配置

关于如何配置@techui/colors的全局Less变量，请跳转到 开始-额外章节-Less的全局变量 章节查看

vue
<template>
  <TuiTextGradient class="theme-gradient-text">
    使用 LESS 变量定义渐变
  </TuiTextGradient>
</template>

<style lang="less">
.theme-gradient-text {
  // 将 TuiColors 的 LESS 变量映射到组件的 CSS 变量
  // @rel5: Red Light 5
  // @bll5: Blue Light 5
  --tui-txtg-c1: @rel5;
  --tui-txtg-c2: @bll5;
  
  // 调整角度
  --tui-txtg-deg: 135deg;
  --tui-txtg-fz: 32px;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
colors渐变颜色数组，至少包含两个颜色值 (如 ['red', 'blue'])Arraynull
gradientType渐变类型，可选 'linear', 'radial', 'conic'String'linear'
angle线性渐变的角度 (deg)，仅在 type 为 linear 时有效Number0
fontSize字体大小 (px)Number—
fontWeight字重，可选 'normal', 'bold', 'bolder', 'lighter'Stringnull

CSS Variables ​

变量名说明备注
--tui-txtg-c1线性渐变起始色仅在无 colors prop 时生效
--tui-txtg-c2线性渐变结束色仅在无 colors prop 时生效
--tui-txtg-deg线性渐变角度默认为 90deg
--tui-txtg-bg完整的背景样式优先级最高，可覆盖所有 props 生成的渐变
--tui-txtg-fz字体大小用于 CSS 控制尺寸
--tui-txtg-fw字重用于 CSS 控制字重
--tui-txtg-ff字体族 (Font Family)—

Slots ​

插槽名说明
default需要应用渐变效果的文本内容