卡片 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

上次更新: