指标卡组件的“值文字大小”设置超过33px后,会导致上方文字和值文字重叠,不好看。本文将介绍,添加设置文字与值间距的属性,修改间距。
1.克隆指标卡组件
内置组件不可更改,需要克隆内置组件,修改克隆后的组件。
克隆方法:选择指标卡组件,右键选择克隆,可在自定义组件中找到克隆后的组件。
2.添加行间距设置属性
step1:选择克隆后的组件,右键编辑,可查看此组件的代码并修改。
step2:点击属性,切换到“高级配置”,将下列代码到最后,方便查看属性。
复制代码
- {
- "desc_zh_TW": "指標值與值之間的間距",
- "isedit": true,
- "caption_en": "Index name and value spacing",
- "defattr_zh_TW": "0px",
- "groupname_en": "text",
- "desc_zh_CN": "指标值与值之间的间距",
- "type": "edit",
- "caption_zh_TW": "指標名於值間距",
- "groupname_zh_TW": "文本",
- "isshow": true,
- "caption_zh_CN": "指标名于值间距",
- "groupname_zh_CN": "文本",
- "name": "textPadding",
- "defattr_en": "0px",
- "desc_en": "The gap between the indicator value and the value",
- "defattr_zh_CN": "0px"
- }
相关代码及位置如下:
复制代码
- var textPadding = "";
复制代码
- //指标名与值间距
- textPadding = cwidget.getProperty("textPadding");
- setProperty("textPadding", textPadding, cwidget);
复制代码
- $basedom.find(".zbk-content > div:first-child").css({"margin-bottom": textPadding,"margin-right":""});
复制代码
- else if (key === "textPadding") {
- textPadding = value;
- //指标值间距
- //布局方式是上下
- $basedom.find(".zbk-content > div:first-child").css({"margin-bottom": value,"margin-right":""});
- }
注意仔细比对,以及括号位置
请先登录