适用于用户等级、卖家等级、会员等级等场景。
示例图

基础用法
页面 .json 文件 usingComponents 中引入组件
// json
{
"usingComponents": {
"mx-level": "/components/mxwui/level/index"
}
}页面 .wxml 文件中使用组件
<mx-level level="1" />更多用法示例
等级 level
属性:level,默认 1,数字。
<mx-level level="1" />背景色 bgColor
属性:bgColor,默认 #CA0E2D,支持任何合法的颜色值,支持传入渐变。
<mx-level level="1" bgColor="#1677FF" />
<mx-level level="1" bgColor="linear-gradient(270deg, #4A4030 0%, #000000 100%)" />背景宽度 bgWidth
属性:bgWidth,默认 56,数字,不带单位,默认使用rpx。
<mx-level level="1" bgWidth="84" />背景高度 bgHeight
属性:bgHeight,默认 32,数字,不带单位,默认使用rpx。
<mx-level level="1" bgHeight="52" />背景圆角 bgRadius
属性:bgRadius,默认 16,数字,不带单位,默认使用rpx。
<mx-level level="1" bgRadius="32" />文本色 textColor
属性:textColor,默认 #FFFFFF,支持任何合法的颜色值。
<mx-level level="1" textColor="#1677FF" />文本字号 textSize
属性:textSize,默认 36,数字,不带单位,默认使用rpx。
<mx-level level="1" textSize="48" />参数
| 参数 | 类型 | 必填 | 可选值 | 默认值 | 参数描述 |
|---|---|---|---|---|---|
| level | Number | 是 | 数字 | 1 |
等级 |
| bgColor | String | 颜色值 | #CA0E2D |
背景色,支持任何合法的颜色值,支持传入渐变 | |
| bgWidth | Number | 数字 | 56 |
背景宽度,不带单位,默认使用rpx | |
| bgHeight | Number | 数字 | 32 |
背景高度,不带单位,默认使用rpx | |
| bgRadius | Number | 数字 | 16 |
背景圆角,不带单位,默认使用rpx | |
| textColor | String | 颜色值 | #FFFFFF |
文本色,支持任何合法的颜色值 | |
| textSize | Number | 数字 | 36 |
文本字号,不带单位,默认使用rpx |
其他说明
无