[doc]Update for v0.4.4

any-tdf · Dec 13, 2023 · 8efbf62 · 8efbf62
1 parent 0b34e4f
commit 8efbf62
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 0 deletions.
diff --git a/doc/components/tabs/api.md b/doc/components/tabs/api.md
@@ -36,6 +36,9 @@
 | tabInjClass       | String  | ''     | -                                          | N    | 单项 Tab 注入 CSS。                           |
 | activeTabInjClass | String  | ''     | -                                          | N    | 激活的 Tab 注入 CSS。                         |
 | activeInjClass    | String  | ''     | -                                          | N    | 指示器注入 CSS。                              |
+| overflow          | Boolean | false  | true/false                                 | N    | 是否开启溢出隐藏。                            |
+| showNum           | Number  | 3      | -                                          | N    | 开启溢出隐藏时，完整显示 Tab 数。             |
+| autoScroll        | Boolean | false  | true/false                                 | N    | 开启溢出隐藏时，是否开启自动滚动。            |
 
 ## Tab Events
 

diff --git a/doc/components/tabs/api_en.md b/doc/components/tabs/api_en.md
@@ -36,6 +36,9 @@
 | tabInjClass       | String  | ''      | -                                          | No       | Inject CSS for individual Tabs.                                         |
 | activeTabInjClass | String  | ''      | -                                          | No       | Inject CSS for active Tab.                                              |
 | activeInjClass    | String  | ''      | -                                          | No       | Inject CSS for indicator.                                               |
+| overflow          | Boolean | false   | true/false                                 | No       | Whether to enable overflow hiding.                                      |
+| showNum           | Number  | 3       | -                                          | No       | When overflow hiding is enabled, the number of Tabs to be displayed.    |
+| autoScroll        | Boolean | false   | true/false                                 | No       | Whether to enable automatic scrolling when overflow hiding is enabled.  |
 
 ## Tab Events
 

diff --git a/doc/components/tabs/guide.md b/doc/components/tabs/guide.md
@@ -30,6 +30,14 @@ Tab 组件可以单独使用，通过绑定的 clicktab 事件，传递出当前
 
 当 Tab props 的 lineType 为 true 时， Tab 会使用线性风格，但若布局方式为 v（垂直）则线性风格不会生效。
 
+### 溢出模式
+
+由于移动设备横向空间有限，当横向布局且 Tab 数量较多或者动态无法确定时，可以开启溢出模式，此时 Tabs 会自动隐藏溢出的 Tab，通过滑动来查看隐藏的 Tab。开启溢出模式后，可以通过 `showNum` 控制显示的 Tab 数量，通过 `autoScroll` 控制是否开启自动滚动。
+
+溢出模式时，可见区域内实际显示的 Tab 是 `showNum+0.5`，如此设计会在初始时将最后一个 Tab 隐藏一半，以便在不刻意提示的情况下，用户可以自然地意识到隐藏了 Tab，从而产生滑动的操作。
+
+> Tip：如果 Tab 内容宽度过大时请适当减小 `showNum`，以免 Tab 内容溢出被隐藏。
+
 ### CSS 注入
 
 Tab 结构相对复杂，为了支持更灵活的自定义样式，内部支持四个地方注入 CSS，injClass 作用于 Tab 最外层元素；tabInjClass 作用于内部的单项 tab；activeTabInjClass 作用于当前激活的 tab；activeInjClass 作用于 Tab 的指示器。

diff --git a/doc/components/tabs/guide_en.md b/doc/components/tabs/guide_en.md
@@ -31,6 +31,14 @@ This property determines the content of the Tabs, and supports a combination of
 
 When the `lineType` property of the `Tab` component is set to `true`, a linear style is used. However, it will not work when the layout is set to 'v' (vertical).
 
+### Overflow mode
+
+Due to the limited horizontal space on mobile devices, when the layout is horizontal and the number of Tabs is large or dynamic, you can enable the overflow mode. In this case, the Tabs will automatically hide the overflowed Tabs and allow you to scroll to view them. When overflow mode is enabled, you can use `showNum` to control the number of Tabs displayed, and use `autoScroll` to control whether to enable automatic scrolling.
+
+When overflow mode is enabled, the actual number of Tabs displayed in the visible area is `showNum+0.5`. This design hides the last Tab by half at the beginning, so that users can naturally realize that a Tab is hidden without being deliberately prompted, thus generating a sliding operation.
+
+> Tip: If the Tab content width is too large, please reduce `showNum` appropriately to avoid hiding the Tab content overflow.
+
 ### CSS injection
 
 The Tab structure is relatively complex. In order to support more flexible customization, four places for injecting CSS are provided internally. The `injClass` property is applied to the outermost element of the Tab. The `tabInjClass` property is applied to the internal single tab. The `activeTabInjClass` property is applied to the currently active tab. And, the `activeInjClass` property is used to apply a specific style to the Tab indicator.

diff --git a/doc/components/tabs/version.md b/doc/components/tabs/version.md
@@ -1,3 +1,7 @@
+## 0.4.4
+
+- [!tag|A|0|]支持溢出模式。
+
 ## 0.4.3
 
 - [!tag|O|0|]Tabs Props 的 `placement` 改为 `position`。

diff --git a/doc/components/tabs/version_en.md b/doc/components/tabs/version_en.md
@@ -1,3 +1,7 @@
+## 0.4.4
+
+- [!tag|A|0|]Overflow mode is supported.
+
 ## 0.4.3
 
 - [!tag|O|0|]Tabs Props `placement` changed to `position`.

diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md
@@ -1,3 +1,7 @@
+## 0.4.4
+
+- 增强 Tabs 组件，详见 [Tabs](https://stdf.design/#/components?nav=tabs&tab=4)。
+
 ## 0.4.3
 
 - 修改 Tabs 组件，详见 [Tabs](https://stdf.design/#/components?nav=tabs&tab=4)。

diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md
@@ -1,3 +1,7 @@
+## 0.4.4
+
+- Enhanced Tabs components, please see [Tabs](https://stdf.design/#/components?nav=tabs&tab=4).
+
 ## 0.4.3
 
 - Modify the Tabs component, please see [Tabs](https://stdf.design/#/components?nav=tabs&tab=4).