ColorUI 使用文档 ColorUI 使用文档
文档
GitHub (opens new window)
文档
GitHub (opens new window)
  • 快速开始

    • 介绍
    • 快速使用
  • 基础元素

    • 布局
    • 背景
    • 文本
    • 图标
    • 按钮
      • 按钮形状
      • 按钮尺寸
      • 按钮颜色
      • 镂空按钮
      • 块状按钮
      • 无效状态
      • 按钮加图标
    • 标签
    • 头像
    • 进度条
    • 边框阴影
    • 加载
  • 交互组件

    • 操作条

      • 底部操作条
      • 标题操作条
      • 顶部操作条
      • 搜索&按钮组&输入操作条
    • 导航栏
    • 列表
    • 卡片
    • 表单
    • 时间轴
    • 聊天
    • 轮播
    • 模态框
    • 步骤条
  • 插件扩展

    • 索引列表
    • 微动画
    • 全屏抽屉
    • 垂直导航
  • 视图模式
  • 目录模式
目录

按钮

在 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
图标
标签

← 图标 标签→

Theme by Vdoing | Copyright © 2022-2024 miren | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式