feat: merge develop

Tencent · Jun 27, 2022 · e6cb8ab · e6cb8ab
2 parents edf650f + 19f72c3
commit e6cb8ab
Show file tree

Hide file tree

Showing 54 changed files with 1,138 additions and 1,539 deletions.
diff --git a/docs/web/api/divider.md b/docs/web/api/divider.md
@@ -3,7 +3,7 @@ title: Divider 分割线
 description: 分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。
 isComponent: true
 usage: { title: '', description: '' }
-spline: base
+spline: layout
 ---
 
 ### 基础分割线

diff --git a/docs/web/api/select-input.md b/docs/web/api/select-input.md
@@ -53,7 +53,7 @@ spline: data
 
 ### 选中项数量超出的输入框
 
-使用 `excessTagsDisplayType` 控制标签超出时的呈现方式：横向滚动显示和换行显示，默认为横向滚动。
+使用 `excessTagsDisplayType` 控制标签超出时的呈现方式：横向滚动显示和换行显示，默认为换行显示。
 
 {{ excess-tags-display-type }}
 

diff --git a/docs/web/api/space.md b/docs/web/api/space.md
@@ -0,0 +1,44 @@
+---
+title: Space 间距
+description: 控制组件之间的间距。
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+### 基本用法
+
+默认为横向排列，控制相邻组件水平间距。
+
+{{ base }}
+
+### 垂直间距
+
+可以设置 `direction=vertical` 调整为竖向排列。
+
+{{ vertical }}
+
+### 间距大小
+
+可以通过 `size` 调整间距大小，自带三个可选值 `small`、`medium`、`large`。
+也可以自定义设置，设置为数组时参数为 `[row-gap, column-gap]`。
+
+{{ size }}
+
+### 对齐方式
+
+可以通过 `align` 设置辅轴对齐方式，效果与 `align-items` 一致。
+
+{{ align }}
+
+### 自动换行
+
+可以通过 `breakLine` 控制是否自动换行，默认不换行。
+
+{{ break-line }}
+
+### 设置分隔符
+
+可以通过 `separator` 设置分隔符。
+
+{{ separator }}
diff --git a/docs/web/api/tag-input.md b/docs/web/api/tag-input.md
@@ -12,7 +12,7 @@ spline: data
 
 ### 标签数量超出的输入框
 
-使用 `excessTagsDisplayType` 控制标签超出时的呈现方式：横向滚动显示和换行显示，默认为横向滚动。
+使用 `excessTagsDisplayType` 控制标签超出时的呈现方式：横向滚动显示和换行显示，默认为换行显示。
 
 {{ excess }}
 

diff --git a/docs/web/overview.md b/docs/web/overview.md
@@ -4,7 +4,7 @@ description: 将根据业务实践持续新增组件类型，敬请留意组件
 spline: explain
 ---
 
-<h3>基础<em class="tag">3</em></h3>
+<h3>基础<em class="tag">2</em></h3>
 <section class="image-group">
   <div class="image-wrapper">
     <a class="item" href="./components/button">
@@ -14,14 +14,6 @@ spline: explain
     </a>
   </div>
 
-  <div class="image-wrapper">
-    <a class="item" href="./components/divider">
-      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-divider.png" />
-      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-divider-dark.png" />
-      <p class="name">Divider 分割线</p>
-    </a>
-  </div>
-
   <div class="image-wrapper">
     <a class="item" href="./components/icon">
       <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-icon.png" />
@@ -31,7 +23,7 @@ spline: explain
   </div>
 </section>
 
-<h3>布局<em class="tag">2</em></h3>
+<h3>布局<em class="tag">3</em></h3>
 <section class="image-group">
   <div class="image-wrapper">
     <a class="item" href="./components/grid">
@@ -48,6 +40,14 @@ spline: explain
       <p class="name">Layout 布局</p>
     </a>
   </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="./components/divider">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-divider.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-divider-dark.png" />
+      <p class="name">Divider 分割线</p>
+    </a>
+  </div>
 </section>
 
 <h3>导航<em class="tag">8</em></h3>
@@ -111,7 +111,7 @@ spline: explain
     </a>
   </div>
 </section>
-<h3>输入<em class="tag">15</em></h3>
+<h3>输入<em class="tag">18</em></h3>
 <section class="image-group">
   <div class="image-wrapper">
     <a class="item" href="./components/cascader">
@@ -242,7 +242,7 @@ spline: explain
   </div>
 </section>
 
-<h3>数据展示<em class="tag">12</em></h3>
+<h3>数据展示<em class="tag">16</em></h3>
 <section class="image-group">
   <div class="image-wrapper">
     <a class="item" href="./components/avatar">