diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 3f8886613a5679f77348eb97ef1ab29e72c7b4bc..79f62d71b7f86a297181d38e1e6bf573a3f7bd20 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -55,6 +55,18 @@ export default defineConfig({ text: '门户部件', link: '/guide/portlet', }, + { + text: '轮播列表', + link: '/guide/carousel-list', + }, + { + text: '轮播表格', + link: '/guide/carousel-grid', + }, + { + text: '进度条', + link: '/guide/rawitem-slider', + }, ], }, ], diff --git a/docs/guide/carousel-grid.md b/docs/guide/carousel-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..852646e886e918e85ff8e56aff9490b9b24a5ccc --- /dev/null +++ b/docs/guide/carousel-grid.md @@ -0,0 +1,47 @@ +# 轮播表格 + +轮播表格主要是用于在大屏模式下对表格视图里面的表格内容进行循环滚动，展现出较好的视觉效果。要使用该插件，需要在表格视图上的表格部件上配置当前插件以及相关控件参数。 + +## 效果呈现 + +轮播表格可实现对表格内容的循环滚动，可通过控件参数设置滚动的模式以及滚动的速度。 + +- 步骤滚动： + + + +- 匀速滚动： + + + +## 插件 + +该插件隶属于表格插件（基于表格部件进行扩展），下方数据导入应用即可使用 + +::: details 点我查看代码 + +```json +[ + { + "plugintype": "GRID_RENDER", + "codename": "UsrPFPlugin0808534754", + "plugintag": "CAROUSEL_GRID", + "pssyspfpluginname": "轮播表格" + } +] +``` + +::: + +## 配置 + +轮播表格插件可根据配置的控件动态参数实现不同的效果，具体参数如下： + +| 参数 | 值 | 说明 | +| -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ROLLMODE | DEFAULT \| STEP | 该参数控制表格的滚动模式，值为 `DEFAULT` 表示连续滚动。
值为`STEP` 表示表格每次只滚动一定距离后停顿一定时间后再次滚动。 | +| SPEED | number | 该参数控制表格的滚动速度，传递一个数字，单位为秒。
当滚动模式为`DEFAULT`时，如果没有设置`SPEED`，那么`SPEED`默认值为 12 ，表示表格会每12 秒完成一次滚动循环。
当滚动模式为`STEP`时，如果没有设置`SPEED`，那么`SPEED`默认值为 2 ，表示表格每2秒滚动一次，一次只滚动一行 。 | diff --git a/docs/guide/carousel-list.md b/docs/guide/carousel-list.md new file mode 100644 index 0000000000000000000000000000000000000000..9cafd26ed570bdd64402de03e63d4f51792c1d39 --- /dev/null +++ b/docs/guide/carousel-list.md @@ -0,0 +1,49 @@ +# 轮播列表 + +轮播列表主要是用于在大屏模式下对列表视图里面的列表内容进行循环滚动，展现出较好的视觉效果。要使用该插件，需要在列表视图上的列表部件上配置当前插件以及相关控件参数。 + +## 效果呈现 + +轮播列表可实现对列表内容的循环滚动，可通过控件参数设置滚动的模式以及滚动的速度。 + +* 步骤滚动： + + + +* 匀速滚动： + + + +## 插件 + +该插件隶属于列表插件（基于列表部件进行扩展），下方数据导入应用即可使用 + +::: details 点我查看代码 + +```json +[ + { + "plugintype": "LIST_RENDER", + "codename": "UsrPFPlugin0806353088", + "plugintag": "CAROUSEL_LIST", + "pssyspfpluginname": "轮播列表" + } +] +``` + +::: + +## 配置 + +轮播列表插件可根据配置的控件动态参数实现不同的效果，具体参数如下： + +| 参数 | 值 | 说明 | +| ----------- | --------------- | ------------------------------------------------------------ | +| ROLLMODE | DEFAULT \| STEP | 该参数控制列表的滚动模式，值为 `DEFAULT` 表示连续滚动。
值为`STEP` 表示列表每次只滚动一定距离后停顿一定时间后再次滚动。 | +| SPEED | number | 该参数控制列表的滚动速度，传递一个数字，单位为秒。
当滚动模式为`DEFAULT`时，如果没有设置`SPEED`，那么`SPEED`默认值为 20 ，表示列表会每20 秒完成一次滚动循环。
当滚动模式为`STEP`时，如果没有设置`SPEED`，那么`SPEED`默认值为 2 ，表示列表每2秒滚动一次，一次只滚动一行 。 | +| BORDERSTYLE | string | 该参数可设置边框名，如CustomDV7，CustomDV8等，具体参数可参考提供的border组件名，设置后列表项外层会套上一层对应组件名的边框样式。 | + diff --git a/docs/guide/rawitem-slider.md b/docs/guide/rawitem-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..fdecb20e5cff0eb59e60510acc430755651297ef --- /dev/null +++ b/docs/guide/rawitem-slider.md @@ -0,0 +1,51 @@ +# 大屏进度条 + +大屏进度条主要是用于在大屏模式下对需要使用到的进度条呈现效果进行优化。 + +## 效果呈现 + +![image-20240810193814966](/img/slider.png) + +## 插件 + +该插件隶属于编辑器插件（基于滑动进度条进行扩展），下方数据导入应用即可使用 + +::: details 点我查看代码 + +编辑器样式 + +```json +[ + { + "codename": "SCREEN_PROGRESS", + "pssyspfpluginid": "UsrPFPlugin0805435089", + "repdefault": 0, + "validflag": 1, + "pssyseditorstylename": "大屏_进度条", + "pseditortypeid": "SLIDER" + } +] +``` + +编辑器插件 + +```json +[ + { + "plugintype": "EDITOR_CUSTOMSTYLE", + "codename": "UsrPFPlugin0805435089", + "plugintag": "SCREEN_PROGRESS", + "pssyspfpluginname": "大屏_进度条" + } +] +``` + +::: + +## 配置 + +进度条插件需要绑定数据项，同时，需要设置编辑器参数`TOTALFIELD`,此参数用于进度条从父数据中去获取总数，并计算对应的进度百分比，具体参数如下： + +| 参数 | 值 | 说明 | +| -------- | ------ | ---------------------------------------------------- | +| ROLLMODE | string | 进度条会根据传递的字符串去父数据中找对应的值作为总数 | \ No newline at end of file diff --git a/docs/public/img/slider.png b/docs/public/img/slider.png new file mode 100644 index 0000000000000000000000000000000000000000..12588fc01e625fc04306fcd6124153cfe30c8484 Binary files /dev/null and b/docs/public/img/slider.png differ diff --git a/docs/public/video/grid_step.mp4 b/docs/public/video/grid_step.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..08732633421a0e1e4526cbed82d97453a1bd2557 Binary files /dev/null and b/docs/public/video/grid_step.mp4 differ diff --git a/docs/public/video/grid_uniform_speed.mp4 b/docs/public/video/grid_uniform_speed.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..c9d528bf9f6fe240cd81c93df57541544d364de2 Binary files /dev/null and b/docs/public/video/grid_uniform_speed.mp4 differ diff --git a/docs/public/video/list_step.mp4 b/docs/public/video/list_step.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..f1fb71f5b9ac7f886f6dec1264ae6fae01ab896a Binary files /dev/null and b/docs/public/video/list_step.mp4 differ diff --git a/docs/public/video/list_uniform_speed.mp4 b/docs/public/video/list_uniform_speed.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..384d8de6b6fce3ac6f67730e81fbdc8e1a3762bf Binary files /dev/null and b/docs/public/video/list_uniform_speed.mp4 differ