Merge branch 'Tencent:develop' into develop

Tencent · Jul 15, 2024 · 088a0d4 · 088a0d4
2 parents eae8a3d + a49c6c9
commit 088a0d4
Show file tree

Hide file tree

Showing 122 changed files with 4,280 additions and 238 deletions.
diff --git a/docs/mobile/api_v2/col.en-US.md b/docs/mobile/api_v2/col.en-US.md
@@ -0,0 +1,17 @@
+---
+title: Layout Layout
+description: Guide and regulate the layout and information distribution on the page with a regular grid array, improve the consistency of the layout within the interface, and save costs.
+spline: base
+isComponent: true
+toc: false
+---
+
+### Component Types
+
+#### Basic
+
+{{ base }}
+
+#### Increase Spacing
+
+{{ offset }}
diff --git a/docs/mobile/api_v2/col.md b/docs/mobile/api_v2/col.md
@@ -0,0 +1,17 @@
+---
+title: Layout 布局
+description: 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+spline: base
+isComponent: true
+toc: false
+---
+
+### 组件类型
+
+#### 基础
+
+{{ base }}
+
+#### 增加间距
+
+{{ offset }}
diff --git a/docs/mobile/api_v2/count-down.en-US.md b/docs/mobile/api_v2/count-down.en-US.md
@@ -6,6 +6,10 @@ isComponent: true
 toc: false
 ---
 
+
+> CountDown is used to display the countdown value in real time. If you need to maintain the consistent font style of numbers with the site's design, we recommend downloading the TCloudNumber font from the "Number Font" section of <a href="https://tdesign.tencent.com/design/fonts">fonts</a>, and importing the TCloudNumberVF.ttf font resource into your project for use.
+
+
 ## Code Demo
 
 ### Base Countdown

diff --git a/docs/mobile/api_v2/count-down.md b/docs/mobile/api_v2/count-down.md
@@ -6,6 +6,9 @@ isComponent: true
 toc: false
 ---
 
+> CountDown 组件用于实时展示倒计时数值。
+如果需要与站点演示一致的数字字体效果，推荐您到 <a href="https://tdesign.tencent.com/design/fonts">数字字体章节</a>，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
+
 ## 代码演示
 
 ### 基础倒计时

diff --git a/docs/mobile/api_v2/image-viewer.en-US.md b/docs/mobile/api_v2/image-viewer.en-US.md
@@ -10,6 +10,10 @@ toc: false
 
 {{ base }}
 
+### Basic and alignment ImageViewer
+
+{{ align }}
+
 ### Operation ImageViewer
 
 {{ operation }}
diff --git a/docs/mobile/api_v2/image-viewer.md b/docs/mobile/api_v2/image-viewer.md
@@ -10,6 +10,10 @@ toc: false
 
 {{ base }}
 
+### 基础图片预览 + 对齐方式
+
+{{ align }}
+
 ### 带操作图片预览
 
 {{ operation }}

diff --git a/docs/mobile/api_v2/loading.en-US.md b/docs/mobile/api_v2/loading.en-US.md
@@ -31,3 +31,15 @@ toc: false
 ### Loading Speed
 
 {{ speed }}
+
+### Full-screen Loading
+
+{{ fullscreen }}
+
+### Attached to a Specific Element
+
+{{ attach }}
+
+### Function Call
+
+{{ service }}
diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md
@@ -31,3 +31,15 @@ toc: false
 ### 加载速度
 
 {{ speed }}
+
+### 全屏加载
+
+{{ fullscreen }}
+
+### 挂载到指定元素
+
+{{ attach }}
+
+### 函数方式调用
+
+{{ service }}
diff --git a/docs/mobile/api_v2/tree-select.en-US.md b/docs/mobile/api_v2/tree-select.en-US.md
@@ -0,0 +1,25 @@
+---
+title: TreeSelect
+description: Suitable for selecting a tree data structure. 
+spline: form
+isComponent: true
+toc: false
+---
+
+## Code Demo
+
+### Component Type
+
+#### Basic TreeSelect
+
+{{ base }}
+
+#### Multiple TreeSelect
+
+{{ multiple }}
+
+### Component Status
+
+#### Three-level TreeSelect
+
+{{ normal }}
diff --git a/docs/mobile/api_v2/tree-select.md b/docs/mobile/api_v2/tree-select.md
@@ -0,0 +1,25 @@
+---
+title: TreeSelect 树形选择
+description: 适用于选择树形的数据结构。
+spline: form
+isComponent: true
+toc: false
+---
+
+## 代码演示
+
+### 组件类型
+
+#### 基础树形选择
+
+{{ base }}
+
+#### 多选树形选择
+
+{{ multiple }}
+
+### 组件状态
+
+#### 三级树形选择
+
+{{ normal }}
diff --git a/docs/mobile/design/dialog.md b/docs/mobile/design/dialog.md
@@ -64,7 +64,7 @@
 </div>
 
 
-### 何时使用
+### 相似组件
 | 组件名                | 何时使用                                                                                   |
 | :-------------------- | :----------------------------------------------------------------------------------------- |
 | [轻提示](./toast)     | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 |

diff --git a/docs/mobile/flutter_design/action-sheet.md b/docs/mobile/flutter_design/action-sheet.md
@@ -0,0 +1,73 @@
+
+
+### 何时使用
+
+需要提供一组与当前场景操作相关的关联操作时使用。
+
+### 组件搭配使用
+
+##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-1.png" />
+  </div>
+
+
+### 常见用法
+##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-2.png" />
+  </div>
+
+<hr />
+
+##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-3.png" />
+  </div>
+
+
+
+### 推荐/慎用示例
+
+##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 动作面板中的操作项不建议用icon完成替代文字。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名                      | 何时使用                                                                                     |
+| :-------------------------- | :------------------------------------------------------------------------------------------- |
+| [抽屉](./drawer)            | 需要收折展示一组数量较多的菜单时使用。                                                       |
+| [对话框](./dialog)          | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。                         |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。                                         |
+| [选择器](./dropdown-menu)   | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/docs/mobile/flutter_design/avatar.md b/docs/mobile/flutter_design/avatar.md
@@ -0,0 +1,61 @@
+
+
+### 何时使用
+
+作为一个用户信息展示，或用来代表某个/某些具体用户。
+
+### 组件搭配使用
+
+##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-1.png" />
+ </div>
+</div>
+<hr />
+
+##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-2.png" />
+ </div>
+</div>
+
+<hr />
+
+##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-3.png" />
+ </div>
+</div>
+
+
+### 常见用法
+
+##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-4.png" />
+</div>
+
+
+
+### 推荐/慎用示例
+
+##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
diff --git a/docs/mobile/flutter_design/back-top.md b/docs/mobile/flutter_design/back-top.md
@@ -0,0 +1,33 @@
+
+
+### 何时使用
+
+当页面内容过长，用户有快速返回到页面顶部的诉求时使用
+
+### 页面布局相关
+
+##### 常驻于页面的右下角，方便用户随时点击返回
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/back-top/back-top-1.png" />
+  </div>
+</div>
+
+<hr />
+
+### 常见用法
+
+##### 当用户滚动页面时，为了不影响到用户对内容的浏览体验，建议可将返回顶部按钮最小化或像右侧收起，当用户停止滚动时，再完全显示按钮
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/back-top/back-top-2.gif" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名            | 何时使用                                                    |
+| :---------------- | :---------------------------------------------------------- |
+| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |