低代码高性能原生UI框架颜色库
uts版本tinycolor颜色库，基于Ant Design颜色算法
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
使用
ts
import { $ux } from '@/uni_modules/ux-frame'
// 获取颜色对象 内置几十种函数
const color = $ux.Color.newColor('#006600')
color.doSomething()import { $ux } from '@/uni_modules/ux-frame'
// 获取颜色对象 内置几十种函数
const color = $ux.Color.newColor('#006600')
color.doSomething()Api
| 事件名 | 参数 | 说明 |
|---|---|---|
| newColor | {color : UxColorInput = '', opts : UxColorOptions = {} as UxColorOptions} | 获取Color对象 |
示例代码
ts
<script setup>
import { $ux } from '@/uni_modules/ux-frame'
let title = ''
const colors = ref<string[]>([] as string[])
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function gen() {
let _color = $ux.Color.randomColors(1)[0]
colors.value = $ux.Color.newColor(_color).monochromatic(6).map((e) : string => e.toHexString())
}
onMounted(() => {
gen()
})
</script><script setup>
import { $ux } from '@/uni_modules/ux-frame'
let title = ''
const colors = ref<string[]>([] as string[])
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function gen() {
let _color = $ux.Color.randomColors(1)[0]
colors.value = $ux.Color.newColor(_color).monochromatic(6).map((e) : string => e.toHexString())
}
onMounted(() => {
gen()
})
</script>html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="颜色库" :bold="true">
<ux-text text="uts版本tinycolor颜色库，基于Ant Design颜色算法"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="颜色库" text="https://www.uxframe.cn/libs/color.html" path="/pages/webview/webview" mode="link"</ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="色板" :bold="true">
<ux-text text="内置几十种颜色处理函数，查看文档可了解详情" :mb="15"></ux-text>
<ux-col>
<ux-button :mr="10" text="随机生成色板" @click="gen()"></ux-button>
<view class="color" :style="{'background-color': color}" v-for="(color, index) in colors" :key="index"></view>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="颜色库" :bold="true">
<ux-text text="uts版本tinycolor颜色库，基于Ant Design颜色算法"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="颜色库" text="https://www.uxframe.cn/libs/color.html" path="/pages/webview/webview" mode="link"</ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="色板" :bold="true">
<ux-text text="内置几十种颜色处理函数，查看文档可了解详情" :mb="15"></ux-text>
<ux-col>
<ux-button :mr="10" text="随机生成色板" @click="gen()"></ux-button>
<view class="color" :style="{'background-color': color}" v-for="(color, index) in colors" :key="index"></view>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>css
<style lang="scss">
.color {
width: 100%;
height: 30px;
border-radius: 10px;
margin-top: 15px;
}
</style><style lang="scss">
.color {
width: 100%;
height: 30px;
border-radius: 10px;
margin-top: 15px;
}
</style>