UCS Design

Appearance

Background Image ​

CSS属性中的 background-image 会设置元素的渐变背景色

函数方法 ​

getOsGradient(options) ​

获取渐变背景颜色

options ​

参数名称类型必填可选值描述
directionstring是direction 渐变方向渐变方向
colorStartstring是色彩UCS 色彩变量 或 Hex 颜色值
colorStopstring是色彩UCS 色彩变量 或 Hex 颜色值
direction 渐变方向 ​
参数值描述
to right从左向右渐变
to left从右向左渐变
to bottom从上到下渐变
to top从下到上渐变
to bottom left从右上角到左下角（3.99开始支持）
to bottom right从左上角到右下角
to top left从右下角到左上角
to top right从左下角到右上角（3.99开始支持）

温馨提示

使用 UCS 色彩变量，切换暗黑模式时则自动变更为深色颜色值。

vue
<template>
	<view class="box" :style="[getOsGradient('to right','primary','success')]">

	</view>
</template>

<script setup>
	import { getOsGradient } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>
vue
<template>
	<view class="box" :style="[getOsGradient('to right','#604CFC','#07C160')]">

	</view>
</template>

<script setup>
	import { getOsGradient } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

参见 ​