TuniaoUI

Appearance

渐变背景 ​

TuniaoUI 内置了 16 种酷炫渐变背景以及基于主题色/内置色的颜色渐变，通过 TnGradientBackground() 函数调用。

样式展示 ​

酷炫渐变 ​

cool-1
cool-2
cool-3
cool-4
cool-5
cool-6
cool-7
cool-8
cool-9
cool-10
cool-11
cool-12
cool-13
cool-14
cool-15
cool-16

主题色渐变 ​

primary
success
warning
danger
info

使用方式 ​

typescript
import { TnGradientBackground } from "@tuniao/tn-ui";

@ComponentV2
struct GradientDemo {
  build() {
    Column({ space: 10 }) {
      // 酷炫渐变
      Text("Cool 1")
        .linearGradient(TnGradientBackground("cool-1"))

      // 主题色渐变
      Text("Primary")
        .linearGradient(TnGradientBackground("primary"))

      // 内置色渐变
      Text("Red")
        .linearGradient(TnGradientBackground("red"))
    }
  }
}

渐变有效值 ​

酷炫渐变 ​

cool-1 到 cool-16，共 16 种预设渐变。

颜色渐变 ​

支持所有主题色和内置色名称：

  • 主题色：primary / success / warning / danger / error / info
  • 内置色：red / purplered / purple / bluepurple / aquablue / blue / indigo / cyan / teal / green / yellowgreen / lime / yellow / orangeyellow / orange / orangered / brown / grey / gray