From 54ad8af1e1ed2f064c8e32cb1da5641377c1df53 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 18 Nov 2024 17:02:41 +0800 Subject: [PATCH] docs: add guides of plugins --- .../demo/en/animation/carousel-animation.md | 2 +- .../demo/en/interaction/head-highlight.md | 2 +- .../demo/en/interaction/invert-highlight.md | 2 +- .../demo/zh/animation/carousel-animation.md | 2 +- .../demo/zh/interaction/head-highlight.md | 2 +- .../demo/zh/interaction/invert-highlight.md | 2 +- .../guide/en/animation/carousel_animation.md | 51 +++++++++++++++++++ .../guide/en/plugin/header-highlight.md | 23 +++++++++ .../guide/en/plugin/invert-highlight.md | 50 ++++++++++++++++++ docs/assets/guide/menu.json | 30 +++++++++++ .../guide/zh/animation/carousel_animation.md | 51 +++++++++++++++++++ .../guide/zh/plugin/header-highlight.md | 23 +++++++++ .../guide/zh/plugin/invert-highlight.md | 49 ++++++++++++++++++ 13 files changed, 283 insertions(+), 6 deletions(-) create mode 100644 docs/assets/guide/en/animation/carousel_animation.md create mode 100644 docs/assets/guide/en/plugin/header-highlight.md create mode 100644 docs/assets/guide/en/plugin/invert-highlight.md create mode 100644 docs/assets/guide/zh/animation/carousel_animation.md create mode 100644 docs/assets/guide/zh/plugin/header-highlight.md create mode 100644 docs/assets/guide/zh/plugin/invert-highlight.md diff --git a/docs/assets/demo/en/animation/carousel-animation.md b/docs/assets/demo/en/animation/carousel-animation.md index 49029b70c..35eacb17e 100644 --- a/docs/assets/demo/en/animation/carousel-animation.md +++ b/docs/assets/demo/en/animation/carousel-animation.md @@ -3,7 +3,7 @@ category: examples group: Animation title: carousel animation cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif -option: ListTable#animationAppear +link: '../guide/animation/carousel_animation' --- # Carousel Animation diff --git a/docs/assets/demo/en/interaction/head-highlight.md b/docs/assets/demo/en/interaction/head-highlight.md index e88a2ecc1..6aeac93ab 100644 --- a/docs/assets/demo/en/interaction/head-highlight.md +++ b/docs/assets/demo/en/interaction/head-highlight.md @@ -3,7 +3,7 @@ category: examples group: Interaction title: Highlight Header cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png -option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross' +link: '../guide/plugin/header-highlight' --- # Highlight Header diff --git a/docs/assets/demo/en/interaction/invert-highlight.md b/docs/assets/demo/en/interaction/invert-highlight.md index 41603b07c..25a918fae 100644 --- a/docs/assets/demo/en/interaction/invert-highlight.md +++ b/docs/assets/demo/en/interaction/invert-highlight.md @@ -3,7 +3,7 @@ category: examples group: Interaction title: invert highlight cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png -option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross' +link: '../guide/plugin/invert-highlight' --- # Invert highlight diff --git a/docs/assets/demo/zh/animation/carousel-animation.md b/docs/assets/demo/zh/animation/carousel-animation.md index fa9978e91..ad853e419 100644 --- a/docs/assets/demo/zh/animation/carousel-animation.md +++ b/docs/assets/demo/zh/animation/carousel-animation.md @@ -3,7 +3,7 @@ category: examples group: Animation title: 轮播动画 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif -option: ListTable#animationAppear +link: '../guide/animation/carousel_animation' --- # 轮播动画 diff --git a/docs/assets/demo/zh/interaction/head-highlight.md b/docs/assets/demo/zh/interaction/head-highlight.md index 1cd2aeb52..ad6dfe65a 100644 --- a/docs/assets/demo/zh/interaction/head-highlight.md +++ b/docs/assets/demo/zh/interaction/head-highlight.md @@ -3,7 +3,7 @@ category: examples group: Interaction title: 高亮表头 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png -option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross' +link: '../guide/plugin/header-highlight' --- # 高亮表头 diff --git a/docs/assets/demo/zh/interaction/invert-highlight.md b/docs/assets/demo/zh/interaction/invert-highlight.md index c1ae696b7..eb8902f39 100644 --- a/docs/assets/demo/zh/interaction/invert-highlight.md +++ b/docs/assets/demo/zh/interaction/invert-highlight.md @@ -3,7 +3,7 @@ category: examples group: Interaction title: 反选高亮 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png -option: ListTable#hover.highlightMode('cross'%7C'column'%7C'row'%7C'cell')%20=%20'cross' +link: '../guide/plugin/invert-highlight' --- # 反选高亮 diff --git a/docs/assets/guide/en/animation/carousel_animation.md b/docs/assets/guide/en/animation/carousel_animation.md new file mode 100644 index 000000000..9ae1533ae --- /dev/null +++ b/docs/assets/guide/en/animation/carousel_animation.md @@ -0,0 +1,51 @@ +# Carousel Animation + +VTable provides carousel animation plugin, which can implement the carousel scrolling animation effect of the table. + +
+ +
+ +## Carousel Animation Configuration + +- `VTable.CarouselAnimationPlugin` carousel animation plugin, can configure the following parameters: + - `rowCount` scroll row count in a carousel animation + - `colCount` scroll column count in a carousel animation + - `animationDuration` The duration of a single carousel animation, in milliseconds + - `animationDelay` The delay of a single carousel animation, in milliseconds + - `animationEasing` The easing function of a single carousel animation + - `replaceScrollAction` Whether to replace the scroll action, if true, the scroll action will be replaced by the carousel animation + +```js +const carouselAnimationPlugin = new VTable.CarouselAnimationPlugin(tableInstance, { + rowCount: 2, + replaceScrollAction: true +}); + +carouselAnimationPlugin.play(); +``` + +For specific usage, please refer to [demo](../../demo/animation/carousel-animation) + +## Carousel Animation API + +### play + +Start carousel animation. +``` +carouselAnimationPlugin.play() +``` + +### pause + +Pause carousel animation. +``` +carouselAnimationPlugin.pause() +``` + +### reset + +Reset carousel animation. +``` +carouselAnimationPlugin.reset() +``` diff --git a/docs/assets/guide/en/plugin/header-highlight.md b/docs/assets/guide/en/plugin/header-highlight.md new file mode 100644 index 000000000..550b6e2de --- /dev/null +++ b/docs/assets/guide/en/plugin/header-highlight.md @@ -0,0 +1,23 @@ +# Header Highlight Plugin + +VTable provides Header Highlight plugin, which can highlight the corresponding header (row header and column header) after selecting a cell. + +
+ +
+ +## Header Highlight Plugin Configuration + +- `VTable.HeaderHighlightPlugin` Header Highlight, can configure the following parameters: + - `columnHighlight` whether highlight the column + - `rowHighlight` whether highlight the row + - `colHighlightBGColor` the background color of the column highlight + - `rowHighlightBGColor` the background color of the row highlight + - `colHighlightColor` the color of the column highlight + - `rowHighlightColor` the color of the row highlight + +```js +const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance, {}); +``` + +For specific usage, please refer to [demo](../../demo/interaction/head-highlight) diff --git a/docs/assets/guide/en/plugin/invert-highlight.md b/docs/assets/guide/en/plugin/invert-highlight.md new file mode 100644 index 000000000..6fc59ad1e --- /dev/null +++ b/docs/assets/guide/en/plugin/invert-highlight.md @@ -0,0 +1,50 @@ +# Invert Highlight Plugin + +VTable provides Invert Highlight plugin, which can highlight the specified area after deselection. + +
+ +
+ +## Invert Highlight Plugin Configuration + +- `VTable.InvertHighlightPlugin` Invert Highlight Plugin, can configure the following parameters: + - `fill` invert highlight background color + - `opacity` invert highlight opacity +- `setInvertHighlightRange` set highlight range + +```js +const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance, {}); + +highlightPlugin.setInvertHighlightRange({ + start: { + col: 0, + row: 6 + }, + end: { + col: 5, + row: 6 + } +}); +``` + +For specific usage, please refer to [demo](../../demo/interaction/head-highlight) + +## Invert Highlight Plugin API + +### setInvertHighlightRange + +Set highlight range. + +```ts +setInvertHighlightRange(range: { + start: { + col: number; + row: number; + }; + end: { + col: number; + row: number; + }; +}): void; +``` \ No newline at end of file diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index 498ac8f83..cca7e45af 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -435,6 +435,13 @@ "zh": "滚动动画", "en": "scroll animationt" } + }, + { + "path": "carousel_animation", + "title": { + "zh": "轮播动画", + "en": "carousel animationt" + } } ] }, @@ -676,6 +683,29 @@ } ] }, + { + "path": "plugin", + "title": { + "zh": "插件", + "en": "plugin" + }, + "children": [ + { + "path": "invert-highlight", + "title": { + "zh": "反选高亮", + "en": "Invert Highlight" + } + }, + { + "path": "header-highlight", + "title": { + "zh": "表头高亮", + "en": "Header Highlight" + } + } + ] + }, { "path": "Developer_Ecology", "title": { diff --git a/docs/assets/guide/zh/animation/carousel_animation.md b/docs/assets/guide/zh/animation/carousel_animation.md new file mode 100644 index 000000000..9d3252998 --- /dev/null +++ b/docs/assets/guide/zh/animation/carousel_animation.md @@ -0,0 +1,51 @@ +# 表格轮播动画 + +VTable 提供轮播动画插件，可以实现表格的轮播滚动动画效果。 + +
+ +
+ +## 轮播动画配置项 + +- `VTable.CarouselAnimationPlugin` 轮播动画插件，可以配置以下参数： + - `rowCount` 一次动画滚动的行数 + - `colCount` 一次动画滚动的列数 + - `animationDuration` 一次滚动动画的时间 + - `animationDelay` 动画间隔时间 + - `animationEasing` 动画缓动函数 + - `replaceScrollAction` 是否替换滚动行为，如果为 true ，每次滚动操作会移动对于的行数/列数 + +```js +const carouselAnimationPlugin = new VTable.CarouselAnimationPlugin(tableInstance, { + rowCount: 2, + replaceScrollAction: true +}); + +carouselAnimationPlugin.play(); +``` + +具体使用参考[demo](../../demo/animation/carousel-animation) + +## 轮播动画API + +### play + +开始轮播动画。 +``` +carouselAnimationPlugin.play() +``` + +### pause + +暂停轮播动画。 +``` +carouselAnimationPlugin.pause() +``` + +### reset + +重置轮播动画。 +``` +carouselAnimationPlugin.reset() +``` diff --git a/docs/assets/guide/zh/plugin/header-highlight.md b/docs/assets/guide/zh/plugin/header-highlight.md new file mode 100644 index 000000000..29652ab54 --- /dev/null +++ b/docs/assets/guide/zh/plugin/header-highlight.md @@ -0,0 +1,23 @@ +# 表头高亮插件 + +VTable 提供表头高亮插件，支持选中单元格后，高亮对应的表头（行头和列头）。 + +
+ +
+ +## 表头高亮插件配置项 + +- `VTable.HeaderHighlightPlugin` 表头高亮插件，可以配置以下参数： + - `columnHighlight` 是否高亮列头 + - `rowHighlight` 是否高亮行头 + - `colHighlightBGColor` 列头高亮背景色 + - `rowHighlightBGColor` 行头高亮背景色 + - `colHighlightColor` 列头高亮字体色 + - `rowHighlightColor` 行头高亮字体色 + +```js +const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance, {}); +``` + +具体使用参考[demo](../../demo/interaction/head-highlight) diff --git a/docs/assets/guide/zh/plugin/invert-highlight.md b/docs/assets/guide/zh/plugin/invert-highlight.md new file mode 100644 index 000000000..fa30fd2bd --- /dev/null +++ b/docs/assets/guide/zh/plugin/invert-highlight.md @@ -0,0 +1,49 @@ +# 反选高亮插件 + +VTable 提供反选高亮插件，支持反选高亮指定区域。 + +
+ +
+ +## 反选高亮插件配置项 + +- `VTable.InvertHighlightPlugin` 反选高亮插件，可以配置以下参数： + - `fill` 反选高亮背景色 + - `opacity` 反选高亮透明度 + +```js +const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance, {}); + +highlightPlugin.setInvertHighlightRange({ + start: { + col: 0, + row: 6 + }, + end: { + col: 5, + row: 6 + } +}); +``` + +具体使用参考[demo](../../demo/interaction/head-highlight) + +## 反选高亮插件 API + +### setInvertHighlightRange + +设置反选高亮范围。 + +```ts +setInvertHighlightRange(range: { + start: { + col: number; + row: number; + }; + end: { + col: number; + row: number; + }; +}): void; +``` \ No newline at end of file