mirror of
https://github.com/VisActor/VTable
synced 2024-11-21 01:18:50 +00:00
docs: add guides of plugins
This commit is contained in:
Rui-Sun
parent
ba1f1b5ab5
commit
e44d97633e
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'
|
||||
---
|
||||
|
||||
# 轮播动画
|
||||
|
||||
@ -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'
|
||||
---
|
||||
|
||||
# 高亮表头
|
||||
|
||||
@ -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'
|
||||
---
|
||||
|
||||
# 反选高亮
|
||||
|
||||
51
docs/assets/guide/en/animation/carousel_animation.md
Normal file
51
docs/assets/guide/en/animation/carousel_animation.md
Normal file
@ -0,0 +1,51 @@
|
||||
# Carousel Animation
|
||||
|
||||
VTable provides carousel animation plugin, which can implement the carousel scrolling animation effect of the table.
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 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()
|
||||
```
|
||||
23
docs/assets/guide/en/plugin/header-highlight.md
Normal file
23
docs/assets/guide/en/plugin/header-highlight.md
Normal file
@ -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.
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 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)
|
||||
50
docs/assets/guide/en/plugin/invert-highlight.md
Normal file
50
docs/assets/guide/en/plugin/invert-highlight.md
Normal file
@ -0,0 +1,50 @@
|
||||
# Invert Highlight Plugin
|
||||
|
||||
VTable provides Invert Highlight plugin, which can highlight the specified area after deselection.
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 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;
|
||||
```
|
||||
@ -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": {
|
||||
|
||||
51
docs/assets/guide/zh/animation/carousel_animation.md
Normal file
51
docs/assets/guide/zh/animation/carousel_animation.md
Normal file
@ -0,0 +1,51 @@
|
||||
# 表格轮播动画
|
||||
|
||||
VTable 提供轮播动画插件，可以实现表格的轮播滚动动画效果。
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/carousel-animation.gif" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 轮播动画配置项
|
||||
|
||||
- `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()
|
||||
```
|
||||
23
docs/assets/guide/zh/plugin/header-highlight.md
Normal file
23
docs/assets/guide/zh/plugin/header-highlight.md
Normal file
@ -0,0 +1,23 @@
|
||||
# 表头高亮插件
|
||||
|
||||
VTable 提供表头高亮插件，支持选中单元格后，高亮对应的表头（行头和列头）。
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/head-highlight.png" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 表头高亮插件配置项
|
||||
|
||||
- `VTable.HeaderHighlightPlugin` 表头高亮插件，可以配置以下参数：
|
||||
- `columnHighlight` 是否高亮列头
|
||||
- `rowHighlight` 是否高亮行头
|
||||
- `colHighlightBGColor` 列头高亮背景色
|
||||
- `rowHighlightBGColor` 行头高亮背景色
|
||||
- `colHighlightColor` 列头高亮字体色
|
||||
- `rowHighlightColor` 行头高亮字体色
|
||||
|
||||
```js
|
||||
const highlightPlugin = new VTable.HeaderHighlightPlugin(tableInstance, {});
|
||||
```
|
||||
|
||||
具体使用参考[demo](../../demo/interaction/head-highlight)
|
||||
49
docs/assets/guide/zh/plugin/invert-highlight.md
Normal file
49
docs/assets/guide/zh/plugin/invert-highlight.md
Normal file
@ -0,0 +1,49 @@
|
||||
# 反选高亮插件
|
||||
|
||||
VTable 提供反选高亮插件，支持反选高亮指定区域。
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/invert-highlight.png" style="flex: 0 0 50%; padding: 10px;">
|
||||
</div>
|
||||
|
||||
## 反选高亮插件配置项
|
||||
|
||||
- `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;
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user