From d3229941a425850726c1375bd896a8d7d8d82568 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 21 May 2024 12:22:59 +0800 Subject: [PATCH] docs: update icon api --- docs/assets/api/en/icon/base-icon.md | 31 ++++++++++++++- docs/assets/api/zh/icon/base-icon.md | 27 +++++++++++++ .../guide/en/custom_define/custom_icon.md | 2 +- .../guide/zh/custom_define/custom_icon.md | 2 +- .../option/en/column/base-column-type.md | 4 +- docs/assets/option/en/icon/base-icon.md | 31 ++++++++++++++- .../en/indicator/base-indicator-type.md | 24 +++++++++--- .../option/zh/column/base-column-type.md | 4 +- docs/assets/option/zh/icon/base-icon.md | 39 ++++++++++++++++--- .../zh/indicator/base-indicator-type.md | 4 +- 10 files changed, 151 insertions(+), 17 deletions(-) diff --git a/docs/assets/api/en/icon/base-icon.md b/docs/assets/api/en/icon/base-icon.md index 9d2fd68e1..f6539fe15 100644 --- a/docs/assets/api/en/icon/base-icon.md +++ b/docs/assets/api/en/icon/base-icon.md @@ -12,6 +12,33 @@ The height of the icon. ${prefix} positionType (IconPosition) IconPosition enumeration type. +``` +/** +* Icon location +* inlineFront: the front of the text content, +* inlineEnd: after the text content +* +*/ +export enum IconPosition { + /**The icon in front of the text line content follows the text positioning and wraps with the text */ + inlineFront = 'inlineFront', + /**The icon after the text line content, positioned with the text, and wrapped with the text. For example, the sort chart is placed in the first line of the text content */ + inlineEnd = 'inlineEnd', + /**Button on the left side of the cell and affected by padding */ + left = 'left', + /**The button on the right side of the cell is affected by padding, such as the pin chart */ + right = 'right', + /**The icon fixed on the right side does not occupy space, is not affected by padding, and may cover the content, such as dropDown */ + absoluteRight = 'absoluteRight', + /**The icon on the left side of the cell content block follows the text positioning and does not wrap with the text */ + contentLeft = 'contentLeft', + /**The icon on the right side of the cell content block follows the text positioning and does not wrap with the text */ + contentRight = 'contentRight', + /**Free positioning in the cell */ + absolute = 'absolute' +} +``` + ${prefix} marginRight (number) The distance between the icon and the element on the right, or the distance between the icon and the cell boundary. @@ -28,6 +55,7 @@ When resetting the icon inside VTable, you need to specify the functional type o Especially for functional icons with switchable states, please be sure to configure funcType, such as sorting function with funcType configured as sort, and name configured as sort_normal, sort_downward, or sort_upward. In this way, the corresponding icon inside can be accurately replaced. IconFuncTypeEnum enumeration type definition: + ``` enum IconFuncTypeEnum { pin = 'pin', @@ -74,6 +102,7 @@ The title of the tooltip. #${prefix} placement (Placement) The position of the tooltip, optional values are top, left, right, or bottom. Placement enumeration type definition: + ``` enum Placement { top = 'top', @@ -102,4 +131,4 @@ The background color of the tooltip. Whether to show the arrow in the tooltip. ${prefix} interactive (boolean) -Whether it is interactive, default is true. Currently, the known non-interactive buttons are dropdown state menus. \ No newline at end of file +Whether it is interactive, default is true. Currently, the known non-interactive buttons are dropdown state menus. diff --git a/docs/assets/api/zh/icon/base-icon.md b/docs/assets/api/zh/icon/base-icon.md index e07a714d6..ceaf5d159 100644 --- a/docs/assets/api/zh/icon/base-icon.md +++ b/docs/assets/api/zh/icon/base-icon.md @@ -12,6 +12,33 @@ icon 的高度。 ${prefix} positionType (IconPosition) IconPosition 枚举类型。 +``` +/** + * icon 的位置 + * inlineFront:文本内容的前面， + * inlineEnd：文本内容后面 + * + */ +export enum IconPosition { + /**文本行内容前面的图标，跟随文本定位，随文本折行 */ + inlineFront = 'inlineFront', + /**文本行内容后面的图标，跟随文本定位，随文本折行。如sort图表 放在文本内容的第一行 */ + inlineEnd = 'inlineEnd', + /**单元格左侧按钮 且受padding影响 */ + left = 'left', + /**单元格右侧按钮 受padding影响 如pin图表 */ + right = 'right', + /**固定在右侧的图标，不占位，不受padding影响，可能压盖内容 如 dropDown */ + absoluteRight = 'absoluteRight', + /**在单元格内容块的左侧的图标，跟随文本定位，不随文本折行 */ + contentLeft = 'contentLeft', + /**在单元格内容块的右侧的图标,跟随文本定位，不随文本折行 */ + contentRight = 'contentRight', + /**在单元格中自由定位 */ + absolute = 'absolute' +} +``` + ${prefix} marginRight (number) 和右侧元素间隔距离，或者与单元格边界的间隔距离。 diff --git a/docs/assets/guide/en/custom_define/custom_icon.md b/docs/assets/guide/en/custom_define/custom_icon.md index 9f7fbe1e5..3b3c10cca 100644 --- a/docs/assets/guide/en/custom_define/custom_icon.md +++ b/docs/assets/guide/en/custom_define/custom_icon.md @@ -84,7 +84,7 @@ const tableInstance = new VTable.ListTable({ In this example, we configure a cell named `Avatar` Icon. The role of this icon is to display the avatar picture, and the value of the picture src is obtained from the field of the avator of records. -Effect picture: TODO +online demo：https://visactor.io/vtable/demo/custom-render/custom-icon ## How to register the icon and use it after registration diff --git a/docs/assets/guide/zh/custom_define/custom_icon.md b/docs/assets/guide/zh/custom_define/custom_icon.md index 5e4eb66b1..50261a077 100644 --- a/docs/assets/guide/zh/custom_define/custom_icon.md +++ b/docs/assets/guide/zh/custom_define/custom_icon.md @@ -84,7 +84,7 @@ const tableInstance = new VTable.ListTable({ 这个示例中，我们为单元格配置了一个名为 `Avatar` 的图标。该图标的作用是用来显示头像图片，图片 src 的值是从 records 的 avator 的字段中获取到的。 -效果图片：TODO +在线 demo：https://visactor.io/vtable/demo/custom-render/custom-icon ## 如何注册 icon 及注册后的使用 diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md index 4d6bc85c5..e6ef00ebf 100644 --- a/docs/assets/option/en/column/base-column-type.md +++ b/docs/assets/option/en/column/base-column-type.md @@ -85,16 +85,18 @@ icon?: | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]); ``` -#${prefix} ColumnIconOption definition: +#${prefix} ColumnIconOption ``` type ColumnIconOption = ImageIcon | SvgIcon; ``` #${prefix} ImageIcon(Object) +type is set to 'image'. The image address needs to be set in src {{ use: image-icon( prefix = '##' + ${prefix}) }} #${prefix} SvgIcon(Object) +type is set to 'svg'. You need to configure the svg address or the complete svg file string in svg {{ use: svg-icon( prefix = '##' + ${prefix}) }} ${prefix} sort(boolean|Function) diff --git a/docs/assets/option/en/icon/base-icon.md b/docs/assets/option/en/icon/base-icon.md index 337a9061f..3b9fe2f04 100644 --- a/docs/assets/option/en/icon/base-icon.md +++ b/docs/assets/option/en/icon/base-icon.md @@ -12,6 +12,33 @@ The height of the icon. ${prefix} positionType (IconPosition) IconPosition enumeration type. +``` +/** +* Icon location +* inlineFront: the front of the text content, +* inlineEnd: after the text content +* +*/ +export enum IconPosition { + /**The icon in front of the text line content follows the text positioning and wraps with the text */ + inlineFront = 'inlineFront', + /**The icon after the text line content, positioned with the text, and wrapped with the text. For example, the sort chart is placed in the first line of the text content */ + inlineEnd = 'inlineEnd', + /**Button on the left side of the cell and affected by padding */ + left = 'left', + /**The button on the right side of the cell is affected by padding, such as the pin chart */ + right = 'right', + /**The icon fixed on the right side does not occupy space, is not affected by padding, and may cover the content, such as dropDown */ + absoluteRight = 'absoluteRight', + /**The icon on the left side of the cell content block follows the text positioning and does not wrap with the text */ + contentLeft = 'contentLeft', + /**The icon on the right side of the cell content block follows the text positioning and does not wrap with the text */ + contentRight = 'contentRight', + /**Free positioning in the cell */ + absolute = 'absolute' +} +``` + ${prefix} marginRight (number) The spacing distance from the right element, or the spacing distance from the cell boundary. @@ -28,6 +55,7 @@ When resetting the icon inside VTable, you need to specify the functional type o Especially for functional icons with toggleable states, please be sure to configure funcType, such as sorting function with funcType set to sort, and name set to sort_normal, sort_downward, or sort_upward. This way, the corresponding icon can be replaced accurately. IconFuncTypeEnum enumeration definition: + ``` enum IconFuncTypeEnum { frozen = 'frozen', @@ -74,6 +102,7 @@ Title of the tooltip. #${prefix} placement (Placement) Tooltip position, optional values are top, left, right, or bottom. Placement enumeration definition: + ``` enum Placement { top = 'top', @@ -102,4 +131,4 @@ Tooltip background color. Whether the tooltip displays an arrow. ${prefix} interactive (boolean) -Whether it is interactive, default is true. Currently known non-interactive buttons are dropdown menu states. \ No newline at end of file +Whether it is interactive, default is true. Currently known non-interactive buttons are dropdown menu states. diff --git a/docs/assets/option/en/indicator/base-indicator-type.md b/docs/assets/option/en/indicator/base-indicator-type.md index f04e42f48..03a3bc489 100644 --- a/docs/assets/option/en/indicator/base-indicator-type.md +++ b/docs/assets/option/en/indicator/base-indicator-type.md @@ -1,4 +1,3 @@ - {{ target: base-indicator-type }} ${prefix} indicatorKey(string) @@ -12,16 +11,18 @@ Indicator name ${prefix} format(FieldFormat) Indicator value formatting + ``` type FieldFormat = (value: number|string, col:number, row:number, table:PivotTable) => any; - ``` +``` ${prefix} headerFormat(FieldFormat) indicator title format + ``` type FieldFormat = (title: number|string, col:number, row:number, table:PivotTable) => any; - ``` +``` ${prefix} width(number|string) @@ -54,9 +55,11 @@ Header cell style. Configuration items vary slightly depending on the headerType ${prefix} style Body cell style, type declaration: + ``` style?: IStyleOption | ((styleArg: StylePropertyFunctionArg) => IStyleOption); ``` + {{ use: common-StylePropertyFunctionArg() }} IStyleOption type structure is as follows: @@ -92,14 +95,19 @@ icon?: | (string | ColumnIconOption)[] | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]); ``` -#${prefix}ColumnIconOption_definition： + +#${prefix}ColumnIconOption + ``` type ColumnIconOption = ImageIcon | SvgIcon; ``` + #${prefix}ImageIcon(Object) +type is set to 'image'. The image address needs to be set in src {{ use: image-icon( prefix = '##' + ${prefix}) }} #${prefix}SvgIcon(Object) +type is set to 'svg'. You need to configure the svg address or the complete svg file string in svg {{ use: svg-icon( prefix = '##' + ${prefix}) }} ${prefix} headerCustomRender(Function|Object) @@ -107,11 +115,12 @@ Custom rendering content definition for the indicator name header. For details, ${prefix} headerCustomLayout(Function) -Custom layout elements for the indicator name header cell. +Custom layout elements for the indicator name header cell. ``` (args: CustomRenderFunctionArg) => ICustomLayoutObj; ``` + {{ use: common-CustomRenderFunctionArg() }} {{ use: custom-layout( @@ -123,9 +132,11 @@ ${prefix} customRender(Function|Object) Custom rendering content definition for the indicator value body cell, either in function or object form. The type is `ICustomRenderFuc | ICustomRenderObj`. The ICustomRenderFuc is defined as follows: + ``` type ICustomRenderFuc = (args: CustomRenderFunctionArg) => ICustomRenderObj; ``` + {{ use: common-CustomRenderFunctionArg() }} {{ use: common-custom-render-object( @@ -139,6 +150,7 @@ Custom layout elements for the indicator value body cell. ``` (args: CustomRenderFunctionArg) => ICustomLayoutObj; ``` + {{ use: common-CustomRenderFunctionArg() }} {{ use: custom-layout( @@ -157,7 +169,9 @@ Whether to disable column width adjustment. If it is a transposed table or the i ${prefix} editor (string|Object|Function) Configure the indicator cell editor + ``` editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); ``` + Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/main/packages/vtable-editors/src/types.ts . diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md index 8f9ab3bef..c00a89820 100644 --- a/docs/assets/option/zh/column/base-column-type.md +++ b/docs/assets/option/zh/column/base-column-type.md @@ -85,16 +85,18 @@ icon?: | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]); ``` -#${prefix}ColumnIconOption 定义： +#${prefix}ColumnIconOption ``` type ColumnIconOption = ImageIcon | SvgIcon; ``` #${prefix}ImageIcon(Object) +type 配置成 'image'。需要配置图片地址在 src 中 {{ use: image-icon( prefix = '##' + ${prefix}) }} #${prefix}SvgIcon(Object) +type 配置成 'svg'。需要配置 svg 地址或者 svg 完整文件字符串在 svg 中 {{ use: svg-icon( prefix = '##' + ${prefix}) }} ${prefix} sort(boolean|Function) diff --git a/docs/assets/option/zh/icon/base-icon.md b/docs/assets/option/zh/icon/base-icon.md index 62f5962dd..08f06a2d5 100644 --- a/docs/assets/option/zh/icon/base-icon.md +++ b/docs/assets/option/zh/icon/base-icon.md @@ -12,6 +12,33 @@ icon 的高度。 ${prefix} positionType (IconPosition) IconPosition 枚举类型。 +``` +/** + * icon 的位置 + * inlineFront:文本内容的前面， + * inlineEnd：文本内容后面 + * + */ +export enum IconPosition { + /**文本行内容前面的图标，跟随文本定位，随文本折行 */ + inlineFront = 'inlineFront', + /**文本行内容后面的图标，跟随文本定位，随文本折行。如sort图表 放在文本内容的第一行 */ + inlineEnd = 'inlineEnd', + /**单元格左侧按钮 且受padding影响 */ + left = 'left', + /**单元格右侧按钮 受padding影响 如pin图表 */ + right = 'right', + /**固定在右侧的图标，不占位，不受padding影响，可能压盖内容 如 dropDown */ + absoluteRight = 'absoluteRight', + /**在单元格内容块的左侧的图标，跟随文本定位，不随文本折行 */ + contentLeft = 'contentLeft', + /**在单元格内容块的右侧的图标,跟随文本定位，不随文本折行 */ + contentRight = 'contentRight', + /**在单元格中自由定位 */ + absolute = 'absolute' +} +``` + ${prefix} marginRight (number) 和右侧元素间隔距离，或者与单元格边界的间隔距离。 @@ -23,11 +50,12 @@ icon 的名称，会作为内部缓存的 key。 ${prefix} funcType (IconFuncTypeEnum) -重置VTable内部的icon时需要指定 icon 的功能类型。 +重置 VTable 内部的 icon 时需要指定 icon 的功能类型。 -特别是具有切换状态的功能性的图标请务必配置上funcType，例如排序功能 funcType 配置 sort，name 配置 sort_normal 或 sort_downward，或 sort_upward。这样才能准确替换到内部相应的icon图标。 +特别是具有切换状态的功能性的图标请务必配置上 funcType，例如排序功能 funcType 配置 sort，name 配置 sort_normal 或 sort_downward，或 sort_upward。这样才能准确替换到内部相应的 icon 图标。 + +IconFuncTypeEnum 枚举类型定义： -IconFuncTypeEnum枚举类型定义： ``` enum IconFuncTypeEnum { frozen = 'frozen', @@ -73,7 +101,8 @@ ${prefix} tooltip (Object) #${prefix} placement (Placement) 气泡框位置，可选值为 top、left、right 或 bottom。 -Placement枚举类型定义： +Placement 枚举类型定义： + ``` enum Placement { top = 'top', @@ -102,4 +131,4 @@ Placement枚举类型定义： 气泡框是否显示箭头。 ${prefix} interactive (boolean) -是否可交互，默认为 true。目前已知不可交互按钮为下拉菜单状态。 \ No newline at end of file +是否可交互，默认为 true。目前已知不可交互按钮为下拉菜单状态。 diff --git a/docs/assets/option/zh/indicator/base-indicator-type.md b/docs/assets/option/zh/indicator/base-indicator-type.md index b4b1febac..9cbf9ccb3 100644 --- a/docs/assets/option/zh/indicator/base-indicator-type.md +++ b/docs/assets/option/zh/indicator/base-indicator-type.md @@ -96,16 +96,18 @@ icon?: | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]); ``` -#${prefix}ColumnIconOption 定义： +#${prefix}ColumnIconOption ``` type ColumnIconOption = ImageIcon | SvgIcon; ``` #${prefix}ImageIcon(Object) +type 配置成 'image'。需要配置图片地址在 src 中 {{ use: image-icon( prefix = '##' + ${prefix}) }} #${prefix}SvgIcon(Object) +type 配置成 'svg'。需要配置 svg 地址或者 svg 完整文件字符串在 svg 中 {{ use: svg-icon( prefix = '##' + ${prefix}) }} ${prefix} headerCustomRender(Function|Object)