UCS Design

Appearance

色彩 ​

Ucs Design 的设计团队采用 Arco 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

主题色 ​

主题
primary

辅助色 ​

成功
success
警告
warning
危险
danger

中性色 ​

中性灰
grey
#a9aeb8
grey-1
#ffffff
grey-2
#f7f8fa
grey-3
#f2f3f5
grey-4
#e5e6eb
grey-5
#c9cdd4
grey-6
#a9aeb8
grey-7
#86909c
grey-8
#6b7785
grey-9
#4e5969
grey-10
#272e3b
grey-11
#1d2129
grey-12
#141414

内置色彩 ​

Red / 浪漫红
red
Orange Red / 晚秋红
orangered
Orange / 活力橙
orange
Gold / 黄昏
gold
Yellow / 柠檬黄
yellow
Lime / 新生绿
lime
Green / 仙野绿
green
Cyan / 碧涛青
cyan
Blue / 海蔚蓝
blue
Arco Blue / 极致蓝
arcoblue
Purple / 暗夜紫
purple
Pink Purple / 青春紫
pinkpurple
Magenta / 品红
magenta

获取色彩API ​

温馨提示

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

getOsColor(options) ​

获取 Ucs Design 色彩模型内置色彩

options ​

参数名称类型必填可选值描述
colorstring是-UCS 色彩变量 或 hex颜色值

使用演示 ​

ts
<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
	/**
	 * 使用 UCS 色彩变量
	 * 浅色模式下获取值为：#604CFC
	 * 深色模式下获取值为：#8772FD
	 */
	console.log(getOsColor("primary")) 
	
	/**
	 * 使用 hex 颜色值
	 * 获取值为：#1890ff
	 */
	console.log(getOsColor("#1890ff")) 
</script>
vue
<template>
	<view>
	<!-- 使用内置色彩变量 -->
	<!-- 浅色模式下获取值为：#604CFC -->
	<!-- 深色模式下获取值为：#8772FD -->
	{{getOsColor("primary")}}
</view>
</template>

<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
</script>

getOsTextColor(options) ​

获取文本颜色

options ​

参数名称类型必填可选值描述
colorstring是色彩UCS 色彩变量 或 Hex 颜色值
vue
<template>
	<text :style="[getOsTextColor('primary')]">
		欢迎使用 ucs-design 设计
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-config"; 
</script>

<style>
	
</style>
vue
<template>
	<text :style="[getOsTextColor('#604CFC')]">
		欢迎使用 ucs-design 设计
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-config"; 
</script>

<style>
	
</style>

getOsBackground(options) ​

获取背景颜色

options ​

参数名称类型必填可选值描述
colorstring是色彩UCS 色彩变量 或 Hex 颜色值
vue
<template>
	<view class="box" :style="[getOsBackground('primary')]">

	</view>
</template>

<script setup>
	import { getOsBackground } from "@/uni_modules/ucs-config"; 
</script>

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

	</view>
</template>

<script setup>
	import { getOsBackground } from "@/uni_modules/ucs-config"; 
</script>

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

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开始支持）
vue
<template>
	<view class="box" :style="[getOsGradient('to right','primary','success')]">

	</view>
</template>

<script setup>
	import { getOsGradient } from "@/uni_modules/ucs-config"; 
</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-config"; 
</script>

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

getOsBorder(options) ​

获取右边框属性

options 参数 ​

参数名称类型必填可选值描述
directionstring是direction 边框方向边框方向
widthstring是-边框宽度
stylestring是solid、dashed、dotted边框样式
colorstring是色彩UCS 色彩变量 或 Hex 颜色值

direction 边框方向 ​

参数值描述
all全边框（四边）
top上边框
bottom下边框
left左边框
right右边框

边框样式 ​

参数值描述
none和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
solid显示为一条实线
dashed显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定
dotted显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半

示例 ​

vue
<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','primary')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 123px;
		height: 123px;
	}
</style>
vue
<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','#604CFC')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-config"; 
</script>

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

更新时间: