diff --git a/docs/guide/custom-image-search-box.md b/docs/guide/custom-image-search-box.md index 2d2020489822670fb580b2236a0727048103bc04..dddcb06da84954c695ac64a1968f1121d4ed41bb 100644 --- a/docs/guide/custom-image-search-box.md +++ b/docs/guide/custom-image-search-box.md @@ -50,13 +50,17 @@ ![配置](../public/img/custom-image-search-box_configStyle.png) -## 功能说明 +插件自定义图片配置截图 -- 支持自定义图片输入框背景 -- 支持占位提示配置 +![配置](../public/img/custom-image-search-box_config_img.png) -## 参数说明 （成员参数配置） +## 成员参数配置 | 名称 | 类型 | 默认值 | 说明 | | ----------- | ------ | ------ | -------------- | | PLACEHOLDER | string | ' ' | 输入框占位提示 | + +## 功能说明 + +- 支持自定义图片输入框背景(可不配置自定义图片，输入框背景展示为透明色) +- 支持占位提示配置 diff --git a/docs/guide/screen-portlet-real-time.md b/docs/guide/screen-portlet-real-time.md index cbac0c846480abb7dba76142c8ecc126fdc38c05..f2e42b37a5e102824961df08ad4fc63afc40648e 100644 --- a/docs/guide/screen-portlet-real-time.md +++ b/docs/guide/screen-portlet-real-time.md @@ -31,13 +31,16 @@ ![配置](../public/img/screen-portlet-real-time_config.png) +## 成员参数配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | ------ | ------------------------ | -------------- | +| VALUEFORMAT | string | YYYY-MM-DD,week,HH:mm:ss | 时间格式化参数，分为年月日，星期和时分秒三个配置部分，可组合配置，参考文档 [日期格式化文档](https://dayjs.fenxianglu.cn/category/parse.html#%E5%AD%97%E7%AC%A6%E4%B8%B2-%E6%A0%BC%E5%BC%8F) | + + ## 功能说明 - 支持实时时间展示 - 时间展示自定义格式 -## 参数说明 (成员参数配置) - -| 属性名 | 类型 | 默认值 | 说明 | -| ----------- | ------ | ------------------------ | -------------- | -| VALUEFORMAT | string | YYYY-MM-DD,week,HH:mm:ss | 时间格式化参数 | +字体颜色取自了大屏主要文本色--ibiz-screen-dashboard-primary-text-color。 \ No newline at end of file diff --git a/docs/guide/screen-radio-list.md b/docs/guide/screen-radio-list.md index c93542afa529681563f09544da97d45926754499..b50de0b95a9b6e3b1ea37e63b7dca90141d28389 100644 --- a/docs/guide/screen-radio-list.md +++ b/docs/guide/screen-radio-list.md @@ -32,13 +32,19 @@ ![配置](../public/img/screen-radio-list_config.png) -## 功能说明 - -- 支持循环切换选项 - -## 参数说明（编辑器参数配置） +## 编辑器参数配置 | 属性名 | 类型 | 默认值 | 说明 | | --------------- | ------- | ------ | ------------ | | ENABLECIRCULATE | boolean | true | 是否开启循环 | | INTERVALTIME | number | 3000 | 循环间隔 | + +## 功能说明 + +- 支持循环切换选项 + +默认字体颜色取自了大屏亮色文本色--ibiz-screen-dashboard-light-text-color。 +选中字体颜色取自了大屏文本色--ibiz-screen-dashboard-text-color 。 +默认背景色取自大屏背景色--ibiz-screen-dashboard-bg-color。 +选中背景色取自大屏激活主要色--ibiz-screen-dashboard-primary-active-color。 +边框颜色取自了大屏边框色--ibiz-screen-dashboard-border-color。 \ No newline at end of file diff --git a/docs/guide/screen-real-time.md b/docs/guide/screen-real-time.md index 2d102d65e8be38459674e047b10f1bd7376d0b89..2d7f2219272fe15ee1c09055ecd7ba0555610f2d 100644 --- a/docs/guide/screen-real-time.md +++ b/docs/guide/screen-real-time.md @@ -32,15 +32,17 @@ ![配置](../public/img/screen-real-time_config.png) +## 编辑器参数配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 值格式化 | string | YYYY-MM-DD,week,HH:mm:ss | 时间格式化参数，分为年月日，星期和时分秒三个配置部分，可组合配置，参考文档 [日期格式化文档](https://dayjs.fenxianglu.cn/category/parse.html#%E5%AD%97%E7%AC%A6%E4%B8%B2-%E6%A0%BC%E5%BC%8F) | + +![配置](../public/img/screen-real-time_params.png) + ## 功能说明 - 支持实时时间展示 - 时间展示自定义格式 -## 参数说明 （编辑器参数配置） - -| 属性名 | 类型 | 默认值 | 说明 | -| -------- | ------ | ------------------------ | -------------- | -| 值格式化 | string | YYYY-MM-DD,week,HH:mm:ss | 时间格式化参数 | - -![配置](../public/img/screen-real-time_params.png) +字体颜色取自了大屏主要文本色--ibiz-screen-dashboard-primary-text-color。 diff --git a/docs/guide/tagged-wall.md b/docs/guide/tagged-wall.md index 78d32f4fb93fdb343f426739102931d0fd27050a..c4be316853e9f937546f3a83d7da87beff6e0ac5 100644 --- a/docs/guide/tagged-wall.md +++ b/docs/guide/tagged-wall.md @@ -31,14 +31,7 @@ ![配置](../public/img/tagged-wall_config.png) -## 功能说明 - -标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。 - -- 支持配置字体大小是否随机，字体大小随机范围 -- 支持配置字体随机颜色 - -## 参数说明 (部件参数配置) +## 部件参数配置 | 名称 | 类型 | 默认值 | 说明 | | -------------------- | -------- | ------------------- | ------------------------ | @@ -46,3 +39,12 @@ | RANDOMFONTSIZERANGE | object | 最大值：16，最小值2 | 随机字体大小时的范围参数 | | DEFAULTFONTSIZE | number | 16 | 不随机时默认字号 | | CUSTOMCOLORGROUP | string[] | [] | 自定义字体颜色组 | + +## 功能说明 + +标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。 + +绘制标签组件(customTag)接收name和id,name为展示的标签名称。 + +- 支持配置字体大小是否随机，字体大小随机范围 +- 支持配置字体随机颜色 diff --git a/docs/public/img/custom-image-search-box_config_img.png b/docs/public/img/custom-image-search-box_config_img.png new file mode 100644 index 0000000000000000000000000000000000000000..7bc16a579c0018f00f79b6145d10cb4939880bd2 Binary files /dev/null and b/docs/public/img/custom-image-search-box_config_img.png differ diff --git a/src/screen-radio-list/screen-radio-list.scss b/src/screen-radio-list/screen-radio-list.scss index f7b36cce5d770a1c9913753790f8f46ab1dec0ed..ffcf3ce2c98ac43bd90860f096c60ff48e30e2a2 100644 --- a/src/screen-radio-list/screen-radio-list.scss +++ b/src/screen-radio-list/screen-radio-list.scss @@ -2,6 +2,7 @@ $screen-radio-list: ( group-row-number: 0, 'radio-input-display': none, 'radio-padding': 0 5px, + 'radio-border': 1px solid getCssVar(screen-dashboard, border-color), 'radio-checked-font-weight': 600, 'radio-label-padding-left': 0, ); @@ -20,13 +21,19 @@ $screen-radio-list: ( .el-radio { width: max-content; padding: getCssVar(screen-radio-list, radio-padding); - color: getCssVar(screen-dashboard, light-text-color); text-align: center; + background-color: getCssVar(screen-dashboard, bg-color); + border: getCssVar(screen-radio-list, radio-border); + + .#{bem('screen-radio-list','text')} { + color: getCssVar(screen-dashboard, primary-active-color); + } &.is-checked { + background-color: getCssVar(screen-dashboard, primary-active-color); .#{bem('screen-radio-list','text')} { font-weight: getCssVar(screen-radio-list, radio-checked-font-weight); - color: getCssVar(screen-dashboard, primary-active-color); + color: getCssVar(screen-dashboard, text-color); } }