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

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

    • 布局
    • 背景
    • 文本
    • 图标
    • 按钮
    • 标签
    • 头像
      • 头像形状
      • 头像尺寸
      • 内嵌文字(图标)
      • 头像颜色
      • 头像组
      • 头像标签
    • 进度条
    • 边框阴影
    • 加载
  • 交互组件

    • 操作条

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

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

头像

需要设置成头像的元素加上 class 类名 cu-avatar,然后再设置 css 样式 background-image 即可

# 头像形状

css 代码

.cu-avatar  默认 
.cu-avatar round  圆
.cu-avatar radius  圆角

演示代码

<view class='cu-avatar'>默认</view>
<view class='cu-avatar round'>椭圆</view>
<view class='cu-avatar radius'>圆角</view>

# 头像尺寸

css 代码

.cu-avatar sm  小    48upx / 24px
.cu-avatar     普通  64upx / 32px
.cu-avatar lg  大    96upx / 48px
.cu-avatar xl  较大  128upx / 64px

演示代码

<view class='cu-avatar radius sm'>小尺寸</view>
<view class='cu-avatar radius'></view>
<view class='cu-avatar radius lg'></view>
<view class='cu-avatar radius xl'></view>

# 内嵌文字(图标)

父容器加上 .cu-avatar,该容器内添加文字或者图标。

演示代码

<view class="cu-avatar radius">
    <text class="cuIcon-people"></text>
</view>
<view class="cu-avatar radius margin-left">
    <text>港</text>
</view>

# 头像颜色

父容器加上 .cu-avatar .bg-red|...,该容器内添加文字或者图标。

演示代码

<view class="cu-avatar radius bg-red">
    <text class="cuIcon-people"></text>
</view>
<view class="cu-avatar radius bg-red margin-left">
    <text>港</text>
</view>

# 头像组

父容器加上 cu-avatar-group,该容器内放置头像即可

演示代码

<view class="cu-avatar-group">
    <view class="cu-avatar radius bg-red">
        <text class="cuIcon-people"></text>
    </view>
    <view class="cu-avatar radius bg-red margin-left">
        <text>港</text>
    </view>
</view>

# 头像标签

父容器是头像,该容器内是数字标签。

演示代码

<view class="cu-avatar radius bg-red margin-left">
    <view class="cu-tag badge cuIcon-male bg-blue"></view>
</view>
上次更新: 2024/05/01, 21:37:52
标签
进度条

← 标签 进度条→

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