docs(legend): 图例分页导航器的主题样式设置 (#2435)

antvis · Mar 17, 2021 · e18fbf3 · e18fbf3
1 parent fd9ad5a
commit e18fbf3
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 1 deletion.
diff --git a/docs/api/components/legend.en.md b/docs/api/components/legend.en.md
@@ -40,7 +40,8 @@ legend: {
 | offsetX       | _number_       | -          | Legends offset in the x direction.                                                                                                                                                            |                                                                             |
 | offsetY       | _number_       | -          | Legends offset in the y direction.                                                                                                                                                            |                                                                             |
 | background    | _object_       | -          | Background box configuration item.reference  [background configuration](#background)                                                                                                          |                                                                             |
-| flipPage      | _boolean_      | false      | Whether to page when there are too many legend items.                                                                                                                                         | <tag color="green" text="Classification legend">Classification legend</tag> |
+| flipPage      | _boolean_      | false      | Whether to page when there are too many legend items. | <tag color="green" text="Classification legend">Classification legend</tag> |                              
+| pageNavigator | _object_ | - | Configure the style of page navigator。 | <tag color="green" text="Classification legend">Classification legend</tag> |
 | itemWidth     | _number \| null_ | null       | The width of the legend item, default to null (automatically computed).                                                                                                                       | <tag color="green" text="Classification legend">Classification legend</tag> |
 | itemHeight    | _number \| null_ | null       | The height of the legend, default to null.                                                                                                                                                    | <tag color="green" text="Classification legend">Classification legend</tag> |
 | itemName      | _object_       | -          | Configure the legend item name text.reference  [itemName configuration](#itemname)                                                                                                            | <tag color="green" text="Classification legend">Classification legend</tag> |

diff --git a/docs/api/components/legend.zh.md b/docs/api/components/legend.zh.md
@@ -40,6 +40,7 @@ legend: {
 | offsetY | _number_ | - | 图例 y 方向的偏移。 |  |
 | background | _object_ | - | 背景框配置项。详见 [background 配置](#background) |  |
 | flipPage | _boolean_ | false | 当图例项过多时是否进行分页。 | <tag color="green" text="分类图例">分类图例</tag> |
+| pageNavigator | _object_ | - | 分页器的主题样式设置。 | <tag color="green" text="分类图例">分类图例</tag> |
 | itemWidth | _number \| null_ | null | 图例项的宽度, 默认为 null（自动计算）。 | <tag color="green" text="分类图例">分类图例</tag> |
 | itemHeight | _number \| null_ | null | 图例的高度, 默认为 null。 | <tag color="green" text="分类图例">分类图例</tag> |
 | itemName | _object_ | - | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | <tag color="green" text="分类图例">分类图例</tag> |

diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md
@@ -40,6 +40,59 @@ Background box configuration item. _LegendBackgroundCFG_ is configured as follow
 
 Apply to <tag color="green" text="Classification legend">Classification legend</tag>,whether to page when there are too many legend items.
 
+##### pageNavigator
+
+<description>**optional** _object_ </description>
+
+Apply to <tag color="green" text="Classification legend">Classification legend</tag>, configure the style of page navigator, it works when legend is in flipPage. Types of _LegendPageNavigatorCfg_ are as follow:
+
+| Properties | Type     | Default | Description          |
+| ------ | --------------------- | ------ | -------------- |
+| marker.style | _PageNavigatorMarkerStyle_ | -      | 分页器指示箭头配置项    |
+| text.style   | _PageNavigatorTextStyle_   | -      | The text style of page info.    |
+
+Types of **_PageNavigatorMarkerStyle_** are as follow:
+
+| Properties | Type     | Default | Description          |
+| ------ | --------------------- | ------ | -------------- |
+| inactiveFill | _string_ | -      | Fill color of arrow marker when unclickable (inactive status). |
+| inactiveOpacity   | _number_   | -      | Fill opacity of arrow marker when unclickable (inactive status). |
+| fill | _string_ | -      | Default fill color of arrow marker (active status). |
+| opacity   | _number_   | -      | Default fill opacity of arrow marker (active status). |
+| size   | _number_   | -      | Size of arrow marker. |
+
+Types of **_PageNavigatorTextStyle_** are as follow:
+
+| Properties | Type     | Default | Description          |
+| ------ | --------------------- | ------ | -------------- |
+| fill | _string_ | -      | Font color of page navigator info. |
+| fontSize   | _number_   | -      |  Font size of page navigator info. |
+
+Example：
+
+```ts
+pageNavigator: {
+  marker: {
+    style: {
+      // 非激活，不可点击态时的填充色设置
+      inactiveFill: '#000',
+      inactiveOpacity: 0.45,
+      // 默认填充色设置
+      fill: '#000',
+      opacity: 0.8,
+      size: 12,
+    },
+  },
+  text: {
+    style: {
+      fill: '#ccc',
+      fontSize: 8,
+    },
+  },
+},
+```
+
+
 ##### handler
 
 <description>**optional** _ContinueLegendHandlerCfg_ </description>

diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md
@@ -40,6 +40,58 @@
 
 适用于 <tag color="green" text="分类图例">分类图例</tag>，当图例项过多时是否进行分页。
 
+##### pageNavigator
+
+<description>**optional** _object_ </description>
+
+适用于 <tag color="green" text="分类图例">分类图例</tag>，图例分页导航器的主题样式设置。_LegendPageNavigatorCfg_ 配置如下：
+
+| 参数名  | 类型                | 默认值 | 描述           |
+| ------ | --------------------- | ------ | -------------- |
+| marker.style | _PageNavigatorMarkerStyle_ | -      | 分页器指示箭头 样式配置    |
+| text.style   | _PageNavigatorTextStyle_   | -      | 分页器页面信息 样式配置   |
+
+**_PageNavigatorMarkerStyle_** 配置如下：
+
+| 参数名  | 类型                | 默认值 | 描述           |
+| ------ | --------------------- | ------ | -------------- |
+| inactiveFill | _string_ | -      | Fill color of arrow marker when unclickable (inactive status). |
+| inactiveOpacity   | _number_   | -      | Fill opacity of arrow marker when unclickable (inactive status). |
+| fill | _string_ | -      | Default fill color of arrow marker (active status). |
+| opacity   | _number_   | -      | Default fill opacity of arrow marker (active status). |
+| size   | _number_   | -      | Size of arrow marker. |
+
+**_PageNavigatorTextStyle_** 配置如下：
+
+| 参数名  | 类型                | 默认值 | 描述           |
+| ------ | --------------------- | ------ | -------------- |
+| fill | _string_ | -      | Font color of page navigator info. |
+| fontSize   | _number_   | -      |  Font size of page navigator info. |
+
+示例：
+
+```ts
+pageNavigator: {
+  marker: {
+    style: {
+      // 非激活，不可点击态时的填充色设置
+      inactiveFill: '#000',
+      inactiveOpacity: 0.45,
+      // 默认填充色设置
+      fill: '#000',
+      opacity: 0.8,
+      size: 12,
+    },
+  },
+  text: {
+    style: {
+      fill: '#ccc',
+      fontSize: 8,
+    },
+  },
+},
+```
+
 ##### handler
 
 <description>**optional** _ContinueLegendHandlerCfg_ </description>