ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 组件

    • 引用组件
    • 主题 ui-change-theme
    • 导航栏 ui-navbar
    • 头像 ui-avatar
    • 标题 ui-title
    • 标签 ui-tag
    • 按钮 ui-btn
    • 图片 ui-img
    • 代码 ui-code
    • 进度条 ui-progress
    • 加载 ui-loading
    • 菜单 ui-menu
    • 浮动 ui-fixed
    • 卡片 ui-card
    • 栅栏 ui-grid
    • 气泡框 ui-popover
    • 模态框 ui-modal
    • 轻提示 $tips
    • 选项卡 ui-tab
    • 轮播图 ui-swiper
    • 步骤条 ui-steps
    • 输入框 ui-input
    • 单选框 ui-radio
    • 复选框 ui-checkbox
    • 开关 ui-switch

卡片 ui-card

"usingComponents": {
    "ui-card": "mp-cu/colorUI/components/ui-card/ui-card"
}

示例-1

<ui-card ui="shadow m-3 radius" imgHeight="auto" img="img" title="title" isTag>
    <view slot="tag" class="ui-tag bg-mask-20 radius-lr">
        <view>
            <text class="cicon-favorite mx-2"/>
            <text>{{item.like}}</text>
        </view>
    </view>
</ui-card>

示例-2

<ui-card ui="shadow m-3 radius" imgHeight="180rpx" img="img" title="title" desc="desc" isTag>
    <view slot="tag" class="ui-tag bg-mask-20 radius-lr">
        <view>
            <text class="cicon-favorite mx-2"/>
            <text>{{item.like}}</text>
        </view>
    </view>
</ui-card>

示例-3

<ui-card ui="shadow m-3 radius" img="img" title="title" desc="desc" fixedTitle/>

参数

参数类型可选值默认值说明
uiString--其他class
imgString--图片地址
imgHeightString-auto图片高度
titleString--标题
fixedTitleBoolean-false浮动标题
descString--内容
imgUiString--图片样式
isTitleBoolean-true标题插槽
isTagBoolean-false标签插槽

插槽

参数说明
默认内容插槽
title标题区域插槽
tag标签区域插槽

mp-cu

Prev
浮动 ui-fixed
Next
栅栏 ui-grid