CornerMark角标

主要用于商品的左上角、右上角的标识性角标。

示例图

基础用法

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-corner-mark": "/components/mxwui/corner-mark/index"
    }
}

页面 .wxml 文件中使用组件

<mx-corner-mark text="内容" />

更多用法示例

角标类型 type

属性：type，可选 image 图片、text 文本，默认 text 文本角标。

• 文本角标

<mx-corner-mark type="text" />

• 图片角标

<mx-corner-mark type="image" />

角标位置 position

属性：position，可选 lt 左上角、rt 右上角、lb 左下角、rb 右下角，默认 lt 在左上角位置。

• 左上角 lt

字段 top 和 left 有效。

<mx-corner-mark position="lt" />

• 右上角 rt

字段 top 和 right 有效。

<mx-corner-mark position="rt" />

• 左下角 lb

字段 bottom 和 left 有效。

<mx-corner-mark position="lb" />

• 右下角 rb

字段 bottom 和 right 有效。

<mx-corner-mark position="rb" />

角标文案 text

属性：text，文案最好4个字以内，不要太长。

<mx-corner-mark text="内容" />

角标文案文本色 textColor

属性：textColor，默认 #FFFFFF，支持任何合法的颜色值。

<mx-corner-mark textColor="#1677FF" />

文案字号 textSize

属性：textSize，默认 24，数字，不带单位，默认使用rpx。

<mx-corner-mark textSize="32" />

角标背景色 bgColor

属性：bgColor，默认 #CA0E2D，支持任何合法的颜色值。

<mx-corner-mark bgColor="#1677FF" />

角标圆角 radius

属性：radius，默认 16，数字，不带单位，默认使用rpx。

<mx-corner-mark radius="32" />

距离顶部 top

属性：top，默认 0，数字，不带单位，默认使用rpx。

<mx-corner-mark top="24" />

距离左侧 left

属性：left，默认 0，数字，不带单位，默认使用rpx。

<mx-corner-mark left="24" />

距离右侧 right

属性：right，默认 0，数字，不带单位，默认使用rpx。

<mx-corner-mark right="24" />

距离底部 bottom

属性：bottom，默认 0，数字，不带单位，默认使用rpx。

<mx-corner-mark bottom="24" />

角标自定义图片 imgUrl

属性：imgUrl，自定义图片地址。

<mx-corner-mark imgUrl="图片地址" />

角标图片宽度 imagWidth

属性：imagWidth，数字，不带单位，默认使用rpx。

<mx-corner-mark imagWidth="24" />

角标图片高度 imgHeight

属性：imgHeight，默认 48，数字，不带单位，默认使用rpx。

<mx-corner-mark imgHeight="24" />

参数

type="text"

type="image"

其他说明

无