按钮
在 button 上加 class cu-btn
即可
# 按钮形状
css 代码
.cu-btn 默认
.cu-btn round 圆角
.cu-btn cuIcon 图标按钮
演示代码
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<!-- 图标按钮 -->
<button class="cu-btn cuIcon">
<text class="cuIcon-emojifill"></text>
</button>
# 按钮尺寸
css 代码
.cu-btn sm 小尺寸
.cu-btn 默认
.cu-btn lg 大尺寸
演示代码
<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>
# 按钮颜色
css 代码
.bg-red 背景颜色 | .bg-...
.shadow 阴影
演示代码
<button class="cu-btn round bg-red shadow">按钮</button>
# 镂空按钮
.bg-
换成 .line-
css 代码
.lines-red|... 边框深(大)
.line-red|... 边框浅(小)
演示代码
<button class="cu-btn round line-red shadow">按钮</button>
# 块状按钮
css 代码
.cu-btn lg
演示代码
<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
# 无效状态
加上 disabled
属性即可
演示代码
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
# 按钮加图标
button
标签里加入图标+文字即可,需要加载状态,加上属性 loading
演示代码
<button class="cu-btn block line-orange lg">
<text class="cuIcon-upload"></text> 图标
</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading>
原生加载
</button>
上次更新: 2024/05/01, 21:37:52