ColorUI 使用文档
2024-05-27 20:22:23
ColorUI 简易 使用文档
- 友情链接
- 文本大小
- 颜色
- 图片
- 头像
- 边距
- 辅助样式
- 阴影
- 布局
- 列表
友情链接
ColorUI使用文档
看云： https://www.kancloud.cn/als24/color/1141392
ColorUI H5
H5： http://demo.color-ui.com/h5.html#/
参考文章链接
简书： https://www.jianshu.com/p/450527d7239a#comments
文本大小
| xs | sm | df | lg | xl | xxl | sl | xsl |
|---|---|---|---|---|---|---|---|
| 20upx | 24upx | 28upx | 32upx | 36upx | 44upx | 80upx | 120upx |
| 10px | 12px | 14px | 16px | 18px | 22px | 40px | 60px |
/* 大小 */
.text-xs{font-size:20upx}
.text-sm{font-size:24upx}
.text-df{font-size:28upx}
.text-lg{font-size:32upx}
.text-xl{font-size:36upx}
.text-xxl{font-size:44upx}
.text-sl{font-size:80upx}
.text-xsl{font-size:120upx}/* 特殊 */
.text-Abc{text-transform:Capitalize}
.text-ABC{text-transform:Uppercase}
.text-abc{text-transform:Lowercase}
.text-price::before{content:"¥";font-size:80%;margin-right:4upx}
.text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.text-bold{font-weight:700}
.text-center{text-align:center}
.text-content{line-height:1.6}
.text-left{text-align:left}
.text-right{text-align:right}
颜色
文字颜色
.line-red,.lines-red,.text-red{color:#e54d42}
.line-orange,.lines-orange,.text-orange{color:#f37b1d}
.line-yellow,.lines-yellow,.text-yellow{color:#fbbd08}
.line-olive,.lines-olive,.text-olive{color:#8dc63f}
.line-green,.lines-green,.text-green{color:#39b54a}
.line-cyan,.lines-cyan,.text-cyan{color:#1cbbb4}
.line-blue,.lines-blue,.text-blue{color:#0081ff}
.line-purple,.lines-purple,.text-purple{color:#6739b6}
.line-mauve,.lines-mauve,.text-mauve{color:#9c26b0}
.line-pink,.lines-pink,.text-pink{color:#e03997}
.line-brown,.lines-brown,.text-brown{color:#a5673f}
.line-grey,.lines-grey,.text-grey{color:#8799a3}
.line-gray,.lines-gray,.text-gray{color:#aaa}
.line-black,.lines-black,.text-black{color:#333}
.line-white,.lines-white,.text-white{color:#fff}
背景颜色
.bg-red{background-color:#e54d42;color:#fff}
.bg-orange{background-color:#f37b1d;color:#fff}
.bg-yellow{background-color:#fbbd08;color:#333}
.bg-olive{background-color:#8dc63f;color:#fff}
.bg-green{background-color:#39b54a;color:#fff}
.bg-cyan{background-color:#1cbbb4;color:#fff}
.bg-blue{background-color:#0081ff;color:#fff}
.bg-purple{background-color:#6739b6;color:#fff}
.bg-mauve{background-color:#9c26b0;color:#fff}
.bg-pink{background-color:#e03997;color:#fff}
.bg-brown{background-color:#a5673f;color:#fff}
.bg-grey{background-color:#8799a3;color:#fff}
.bg-gray{background-color:#f0f0f0;color:#333}
.bg-black{background-color:#333;color:#fff}
.bg-white{background-color:#fff;color:#666}.light{}.bg-gradual-red{background-image:linear-gradient(45deg,#f43f3b,#ec008c);color:#fff}
.bg-gradual-orange{background-image:linear-gradient(45deg,#ff9700,#ed1c24);color:#fff}
.bg-gradual-green{background-image:linear-gradient(45deg,#39b54a,#8dc63f);color:#fff}
.bg-gradual-purple{background-image:linear-gradient(45deg,#9000ff,#5e00ff);color:#fff}
.bg-gradual-pink{background-image:linear-gradient(45deg,#ec008c,#6739b6);color:#fff}
.bg-gradual-blue{background-image:linear-gradient(45deg,#0081ff,#1cbbb4);color:#fff}
图片
<view class="bg-img bg-mask" style="background-image: url('')">遮罩
</view><view class="bg-img" style="background-image: url('')">透明
</view><view class="bg-img" style="background-image: url()"></view>
<view class="bg-img" :style="'background-image: url(' + i.img + ')'"></view>
头像
| round | radius | sm | df | lg | xl |
|---|---|---|---|---|---|
| 圆 | 圆角 | 48upx | 64upx | 96upx | 128upx |
| 24px | 32px | 48px | 64px |
<view class="cu-avatar"></view><view class="cu-avatar">文字图标</view><view class="cu-avatar"><text>图标</text></view><view class="cu-avatar" style="background-image: url()"></view>
<view class="cu-avatar" :style="'background-image: url(' + i.img + ')'"></view><!-- 其他 -->
边距
| xs | sm | df | lg | xl |
|---|---|---|---|---|
| 10upx | 20upx | 30upx | 40upx | 50upx |
| 5px | 10px | 15px | 20px | 25px |
margin
.margin-0{margin:0}
.margin-xs{margin:10upx}
.margin-sm{margin:20upx}
.margin{margin:30upx}
.margin-lg{margin:40upx}
.margin-xl{margin:50upx}
.margin-top-xs{margin-top:10upx}
.margin-top-sm{margin-top:20upx}
.margin-top{margin-top:30upx}
.margin-top-lg{margin-top:40upx}
.margin-top-xl{margin-top:50upx}
.margin-right-xs{margin-right:10upx}
.margin-right-sm{margin-right:20upx}
.margin-right{margin-right:30upx}
.margin-right-lg{margin-right:40upx}
.margin-right-xl{margin-right:50upx}
.margin-bottom-xs{margin-bottom:10upx}
.margin-bottom-sm{margin-bottom:20upx}
.margin-bottom{margin-bottom:30upx}
.margin-bottom-lg{margin-bottom:40upx}
.margin-bottom-xl{margin-bottom:50upx}
.margin-left-xs{margin-left:10upx}
.margin-left-sm{margin-left:20upx}
.margin-left{margin-left:30upx}
.margin-left-lg{margin-left:40upx}
.margin-left-xl{margin-left:50upx}
.margin-lr-xs{margin-left:10upx;margin-right:10upx}
.margin-lr-sm{margin-left:20upx;margin-right:20upx}
.margin-lr{margin-left:30upx;margin-right:30upx}
.margin-lr-lg{margin-left:40upx;margin-right:40upx}
.margin-lr-xl{margin-left:50upx;margin-right:50upx}
.margin-tb-xs{margin-top:10upx;margin-bottom:10upx}
.margin-tb-sm{margin-top:20upx;margin-bottom:20upx}
.margin-tb{margin-top:30upx;margin-bottom:30upx}
.margin-tb-lg{margin-top:40upx;margin-bottom:40upx}
.margin-tb-xl{margin-top:50upx;margin-bottom:50upx}
padding
.padding-0{padding:0}
.padding-xs{padding:10upx}
.padding-sm{padding:20upx}
.padding{padding:30upx}
.padding-lg{padding:40upx}
.padding-xl{padding:50upx}
.padding-top-xs{padding-top:10upx}
.padding-top-sm{padding-top:20upx}
.padding-top{padding-top:30upx}
.padding-top-lg{padding-top:40upx}
.padding-top-xl{padding-top:50upx}
.padding-right-xs{padding-right:10upx}
.padding-right-sm{padding-right:20upx}
.padding-right{padding-right:30upx}
.padding-right-lg{padding-right:40upx}
.padding-right-xl{padding-right:50upx}
.padding-bottom-xs{padding-bottom:10upx}
.padding-bottom-sm{padding-bottom:20upx}
.padding-bottom{padding-bottom:30upx}
.padding-bottom-lg{padding-bottom:40upx}
.padding-bottom-xl{padding-bottom:50upx}
.padding-left-xs{padding-left:10upx}
.padding-left-sm{padding-left:20upx}
.padding-left{padding-left:30upx}
.padding-left-lg{padding-left:40upx}
.padding-left-xl{padding-left:50upx}
.padding-lr-xs{padding-left:10upx;padding-right:10upx}
.padding-lr-sm{padding-left:20upx;padding-right:20upx}
.padding-lr{padding-left:30upx;padding-right:30upx}
.padding-lr-lg{padding-left:40upx;padding-right:40upx}
.padding-lr-xl{padding-left:50upx;padding-right:50upx}
.padding-tb-xs{padding-top:10upx;padding-bottom:10upx}
.padding-tb-sm{padding-top:20upx;padding-bottom:20upx}
.padding-tb{padding-top:30upx;padding-bottom:30upx}
.padding-tb-lg{padding-top:40upx;padding-bottom:40upx}
.padding-tb-xl{padding-top:50upx;padding-bottom:50upx}
辅助样式
实线
.solid,.solid-top,.solid-right,.solid-bottom,.solid-left
虚线
。dashed
阴影
翘边阴影：shadow-warp
长阴影： shadow-blur
布局
flex
.flex{display:flex}/* 对齐 */
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.align-start{align-items:flex-start}
.align-end{align-items:flex-end}
.align-center{align-items:center}
.align-stretch{align-items:stretch}/* 其他 */
.flex-direction{flex-direction:column}
.flex-wrap{flex-wrap:wrap}/* 固定尺寸 */
.basis-xs{flex-basis:20%}
.basis-sm{flex-basis:40%}
.basis-df{flex-basis:50%}
.basis-lg{flex-basis:60%}
.basis-xl{flex-basis:80%}/* 比例分布*/
.flex-sub{flex:1}
.flex-twice{flex:2}
.flex-treble{flex:3}/* 自对齐 */
.self-start{align-self:flex-start}
.self-center{align-self:flex-center}
.self-end{align-self:flex-end}
.self-stretch{align-self:stretch}
.align-stretch{align-items:stretch}
grid
| col-1 | col-2 | col-3 | col-4 | col-5 |
|---|---|---|---|---|
| 1等分列 | 2等分列 | 3等分列 | 4等分列 | 5等分列 |
<view class="grid col-2"><view>等分</view><view></view>
</view><view class="grid col-2 grid-square"><view>等高</view><view></view>
</view>
列表
| sm-border | card-menu | arrow |
|---|---|---|
| 短边框 | 卡片 | 箭头 |
<view class="cu-list menu"><view class="cu-item"><view class="content"><text class="cuIcon-circlefill text-grey"></text><text class="text-grey">图标 + 标题</text></view></view><view class="cu-item"><view class="content"><image src="/static/logo.png" class="png" mode="aspectFit"></image><text class="text-grey">图片 + 标题</text></view></view><view class="cu-item"><button class="cu-btn content" open-type="contact"><text class="cuIcon-btn text-olive"></text><text class="text-grey">Open-type 按钮</text></button></view><view class="cu-item"><navigator class="content" hover-class="none" url="../list/list" open-type="redirect"><text class="cuIcon-discoverfill text-orange"></text><text class="text-grey">Navigator 跳转</text></navigator></view><view class="cu-item"><view class="content"><text class="cuIcon-warn text-green"></text><text class="text-grey">文本</text></view><view class="action"><text class="text-grey text-sm">小目标还没有实现！</text></view></view>
</view>
ColorUI 使用文档相关推荐
- colorui 文档
colorui 文档 文字 .text-xs {font-size: 20rpx;}.text-sm {font-size: 24rpx;}.text-df {font-size: 28rpx;}.t ...
- 多文档程序 两个menu框架_汇总9款优秀的开源小程序UI框架
卧槽这玩意儿写的这么烂,我可以写一个更烂的来恶心作者--开源社区,经典语录 随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 布莱恩特:Github优秀的小程序 ...
- 导出swagger2生成的文档
百度了好多篇用法,没法用.特此记录一下 一.下载项目 下载https://github.com/Swagger2Markup/spring-swagger2markup-demo下的项目,保存,注意文 ...
- README 规范和项目文档规范
1. README 规范 我们直接通过一个 README 模板,来看一下 README 规范中的内容: # 项目名称<!-- 写一段简短的话描述项目 -->## 功能特性<!-- 描 ...
- FastAPI 自动生成的docs文档没法使用
FastAPI 自动生成的docs文档没法使用,当展开路径时候一直在转圈,具体就是这样 这个是由于swagger-ui 3.30.1 中的bug导致,具体bug可以看这里 我们可以通过在FastAPI ...
- 【软件工程】VB版机房文档总结
前言: 软工视频+软工文档+UML视频+UML图的学习过程图! 这部分的知识很厚,只是知道了个大概!最开始 慢悠悠的像个老爷爷走进度,后来遇到点什么事,妈呀,管不了那么多了,赶紧弄完在说,拖了多久了都 ...
- 智能文档理解:通用文档预训练模型
预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...
- 基于javaGUI的文档识别工具制作
基于javaGUI的文档识别工具制作 对于某些文本,其中富含了一些标志,需要去排除,以及去获得段落字数,以下是我个人写的一个比较简单的文档识别工具,含导入文件.导出文件以及一个简单的识别功能. 1.功 ...
- 从单一图像中提取文档图像：ICCV2019论文解读
从单一图像中提取文档图像:ICCV2019论文解读 DewarpNet: Single-Image Document Unwarping With Stacked 3D and 2D Regressi ...
- 函数小知识点（文档字符串，闭包等）
1 文档字符串(Documentation Strings) 一般被称为docstring,一款你应当使用的重要工具,它能够帮助你更好地记录程序并让其更加易于理解.令人惊叹的是,当程序实际运行时,我们 ...
最新文章
- BZOJ-1644: [Usaco2007 Oct]Obstacle Course 障碍训练课(SPFA)
- NeurIPS 2019截稿期服务器被挤爆，投稿数增长40%创历史新高
- qt5.5.1配置winpcap4.1.2
- (022)[工具软件]图片浏览 JPEGView
- 北京阿里云ACE态势感知大屏体验黑客攻击与防御
- C++虚函数和纯虚函数的区别
- nssl1338-逃亡路径【最短路计数,bfs】
- iOS -转载-开发之个人开发者账号转公司开发者账号
- linux dhcp服务启动失败
- 异构平台对比（GPU FPGA DSP）
- SQL SERVER自带调试工具SQL Server Profiler简单用法
- 漫画 | Redis常见面试问题
- HTTP：一次完整的HTTP服务过程
- jsweet下载编译
- 12.10上海交大PMP试题每日一题
- 那些年我们常用的软件
- Data Matrix二维码编码原理及其识别技术
- 超越鼓励师 for VS Code, 写代码不再孤单，有杨超越与你同在
- 基于matlab的音频处理论文,基于Matlab的语音信号处理与仿真设计毕业论文
- 华三交换机如何进入配置_如何初始化配置H3C交换机