tmui-cli 2.0.6 → 5.3.2

package/data/uniappx/css/background-image.md

@@ -36,9 +36,6 @@ background-image: <bg-image>#;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex:1">
-  
     <view>
       
       <view style="width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);"></view>
@@ -69,6 +66,10 @@ background-image: <bg-image>#;
         </scroll-view>
       </view>
 
+      <text class="uni-title-text uni-common-mt">text 组件</text>
+      <text class="uni-subtitle-text">text 设置 background-image: linear-gradient(to right, #fd4365, #fe747a);</text>
+      <text id="text-gradient-background" class="text-gradient-background">text 渐变背景测试</text>
+
       <view class="uni-common-mt">
         <text class="uni-title-text">style.setProperty 动态设置 background-image </text>
         <text>background-image: {{backgroundImage}}</text>
@@ -84,9 +85,6 @@ background-image: <bg-image>#;
         <input-data :defaultValue="backgroundImage" title="background-image 自定义值" type="text" @confirm="inputChangeBackgroundImage"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>
@@ -112,6 +110,18 @@ background-image: <bg-image>#;
     color: white;
   }
 
+  .text-gradient-background {
+    margin-top: 50px;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    font-size: 17px;
+    color: #fff;
+    border-radius: 31px;
+    background-image: linear-gradient(to right, #fd4365, #fe747a);
+  }
+
   .native-view-bg {
     width: 150px;
     height: 100px;

package/data/uniappx/css/border-bottom-color.md

@@ -22,9 +22,9 @@ border-bottom-color: <'border-top-color'>;
 - color
 
 ### border-bottom-color 的属性值
-| 名称 | 兼容性 | 描述 |
-| :- | :- | :- |
-| inherit | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 一个代表父元素底边颜色的关键字（可能和 border-bottom-color 默认值不同） |
+| 名称 | 描述 |
+| :- | :- |
+| inherit | 一个代表父元素底边颜色的关键字（可能和 border-bottom-color 默认值不同） |
 
 ### 默认值 @default-value 
  | 平台 | 默认值 |

package/data/uniappx/css/border-bottom.md

@@ -36,9 +36,6 @@ border-bottom: <line-width> || <line-style> || <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <view>
         <text>border-bottom: 5px dashed blue</text>
@@ -142,9 +139,6 @@ border-bottom: <line-width> || <line-style> || <color>;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-color.md

@@ -22,16 +22,16 @@ border-color: <color>{1,4};
 - color
 
 ### border-color 的属性值
-| 名称 | 兼容性 | 描述 |
-| :- | :- | :- |
-| color | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示四个边框的颜色，仅用于单值语法。 |
-| horizontal | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。 |
-| vertical | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。 |
-| top | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示上边框的颜色，仅用于三值或四值语法。 |
-| bottom | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示下边框的颜色，仅用于三值或四值语法。 |
-| right | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示右边框的颜色，仅用于四值语法。 |
-| left | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用 \<color> 来表示左边框的颜色，仅用于四值语法。 |
-| inherit | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。 |
+| 名称 | 描述 |
+| :- | :- |
+| color | 使用 \<color> 来表示四个边框的颜色，仅用于单值语法。 |
+| horizontal | 使用 \<color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。 |
+| vertical | 使用 \<color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。 |
+| top | 使用 \<color> 来表示上边框的颜色，仅用于三值或四值语法。 |
+| bottom | 使用 \<color> 来表示下边框的颜色，仅用于三值或四值语法。 |
+| right | 使用 \<color> 来表示右边框的颜色，仅用于四值语法。 |
+| left | 使用 \<color> 来表示左边框的颜色，仅用于四值语法。 |
+| inherit | 这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。 |
 
 ### 默认值 @default-value 
  | 平台 | 默认值 |
@@ -50,9 +50,6 @@ border-color: <color>{1,4};
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -220,9 +217,6 @@ border-color: <color>{1,4};
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-left.md

@@ -36,9 +36,6 @@ border-left: <line-width> || <line-style> || <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <view>
         <text>border-left: 5px solid blue</text>
@@ -142,9 +139,6 @@ border-left: <line-width> || <line-style> || <color>;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-radius.md

@@ -34,9 +34,6 @@ border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -287,9 +284,6 @@ border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-right.md

@@ -36,9 +36,6 @@ border-right: <line-width> || <line-style> || <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <view>
         <text>border-right: 5px solid blue</text>
@@ -142,9 +139,6 @@ border-right: <line-width> || <line-style> || <color>;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-style.md

@@ -41,9 +41,6 @@ border-style: <line-style>{1,4};
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -204,9 +201,6 @@ border-style: <line-style>{1,4};
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-top.md

@@ -36,9 +36,6 @@ border-top: <line-width> || <line-style> || <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <view>
         <text>border-top: 5px dashed blue</text>
@@ -142,9 +139,6 @@ border-top: <line-width> || <line-style> || <color>;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border-width.md

@@ -45,10 +45,7 @@ border-width: <line-width>{1,4};
 >示例
 ```vue
 <template>
-  
-  <scroll-view class="border-width-page uni-theme-root" style="flex: 1">
-  
-  <view class="border-width-page uni-theme-root">
+  <view class="border-width-page">
     <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
     <view>
       <text class="theme-label">border-width: 5px (无 border-style)</text>
@@ -335,9 +332,6 @@ border-width: <line-width>{1,4};
         @confirm="inputChangeBorderWidth"></input-data>
     </view>
   </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/border.md

@@ -38,9 +38,6 @@ border: <line-width> || <line-style> || <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <view>
         <text>border与background-image同时设置</text>
@@ -201,9 +198,6 @@ border: <line-width> || <line-style> || <color>;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/bottom.md

@@ -39,10 +39,7 @@ bottom: <length> | <percentage> | auto;
 >示例
 ```vue
 <template>
-  
-  <scroll-view class="uni-theme-root" style="flex: 1">
-  
-    <view class="css-page uni-theme-root" style="flex-grow: 1;">
+    <view class="css-page" style="flex-grow: 1;">
       <view class="uni-common-mb">
         <text class="uni-title-text">bottom: 20px (距离底部 20px) - 右侧：拍平</text>
         <view class="test-container">
@@ -192,9 +189,6 @@ bottom: <length> | <percentage> | auto;
       </view>
       
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 

package/data/uniappx/css/box-shadow.md

@@ -38,10 +38,7 @@ box-shadow: none | <shadow>#;
 >示例
 ```vue
 <template>
-  
-  <scroll-view class="uni-theme-root" style="flex: 1">
-  
-    <view class="box-shadow-page uni-theme-root" style="flex-grow: 1">
+    <view class="box-shadow-page" style="flex-grow: 1">
       <view style="margin-bottom: 10px;">
         <text class="box-shadow-label" style="font-weight: bold;">说明：左边是正常版本，右边是拍平版本</text>
       </view>
@@ -693,9 +690,6 @@ box-shadow: none | <shadow>#;
       </view>
 
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/box-sizing.md

@@ -43,10 +43,7 @@ box-sizing: content-box | border-box;
 >示例
 ```vue
 <template>
-  
-  <scroll-view class="uni-theme-root" style="flex: 1">
-  
-  <view class="uni-theme-root" style="flex-grow: 1;">
+  <view style="flex-grow: 1;">
     <view>
       <text class="desc-text">content-box（标准盒模型，默认值）</text>
       <text class="help-text">width 只包括内容宽度，padding 和 border 在盒子外部向外扩展</text>
@@ -211,9 +208,6 @@ box-sizing: content-box | border-box;
       </view>
     
   </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/color.md

@@ -22,9 +22,9 @@ color: <color>;
 - color
 
 ### color 的属性值
-| 名称 | 兼容性 | 描述 |
-| :- | :- | :- |
-| currentcolor | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，currentcolor 将被视为 inherit。 |
+| 名称 | 描述 |
+| :- | :- |
+| currentcolor | 将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，currentcolor 将被视为 inherit。 |
 
 ### 默认值 @default-value 
  | 平台 | 默认值 |
@@ -49,9 +49,6 @@ color: <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view class="demo-box">
@@ -107,9 +104,6 @@ color: <color>;
         <input-data :defaultValue="data.color" title="color 自定义值" type="text" @confirm="inputChangeColor"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/common/at-rules.md

@@ -11,23 +11,23 @@
 | @font-feature-values | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。 |
 | @font-palette-values | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @font-palette-values CSS at-rule 允许您自定义字体制作者创建的字体调色板的默认值。 |
 | @import | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | @import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。 |
-| @keyframes | Web 4.0 / Android(VDOM) x / Android(Vapor) 5.25 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.25（部分支持，见上） | 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 |
+| @keyframes | Web 4.0 / Android(VDOM) x / Android(Vapor) 5.31 / iOS(VDOM) x / iOS(Vapor) 5.31 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.31（部分支持，见上） | 关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。 |
 | @layer | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | CSS @规则 中的@layer声明了一个 级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。 |
 | @media | Web 4.0 / Android(VDOM) x / Android(Vapor) 5.25 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.25（部分支持，见上） | @media CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。 |
 | @namespace | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个 namespaces 的文档时才有用，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。 |
 | @page | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @page 规则用于在打印文档时修改某些 CSS 属性。 |
 | @property | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 |
 | @supports | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | @supports CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。 |
-| @-moz-document | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. |
-| @-moz-keyframes | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
-| @-ms-viewport | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Specifies the size, zoom factor, and orientation of the viewport. |
-| @-o-keyframes | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
-| @-o-viewport | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Specifies the size, zoom factor, and orientation of the viewport. |
-| @-webkit-keyframes | Web 4.0 / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
+| @-moz-document | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. |
+| @-moz-keyframes | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
+| @-ms-viewport | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Specifies the size, zoom factor, and orientation of the viewport. |
+| @-o-keyframes | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
+| @-o-viewport | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Specifies the size, zoom factor, and orientation of the viewport. |
+| @-webkit-keyframes | Web 4.0 / Android - / iOS - / HarmonyOS -（部分支持，见上） | Defines set of animation key frames. |
 
 不支持的css功能，并不影响业务开发。因为css本质是一种编写元素的样式属性的一种描述性写法。元素的所有样式设置，都可以脱离css这种写法，由API完成。
 
-- `@keyframes关键帧动画`，在App平台，可以使用API方式实现，暂不支持通过css方式实现。详见[UniElement的animate方法](../../dom/unielement.md#animate)
+- `@keyframes关键帧动画`，App平台蒸汽模式自5.31起支持。老版本可以使用API方式实现，API详见[UniElement的animate方法](../../dom/unielement.md#animate)
 
 ## 字体 @font
 
@@ -54,7 +54,13 @@ web中加载字体图标，有 `unicode直显` 和 `伪元素+content` 2种方
 
 有些字体图标网站导出代码时，默认使用`伪元素+content`方式，需要注意这个坑，改用 unicode直显。
 
-unicode直显方式的性能优于伪元素方式，但源码阅读的直观性略差。
+unicode直显方式的性能优于伪元素方式，尤其是text组件设置flatten属性拍平后性能更佳。
+缺点是源码阅读的直观性略差。
+
+还有一种解决方式是封装成组件，参考[uni-icons组件](../../component/uni-ui-x/uni-icons.md)，用type来表示，这样源码的可读性更佳。比如
+```vue
+<uni-icons type="search" />
+```
 
 注意text组件直显unicode，需要用 <code v-pre>{{'\u'}}</code> 的方式包裹。
 另外注意实体字符和unicode的区别。
@@ -110,11 +116,16 @@ app平台的内置组件和API用到了一些字体，同时共享出来给开
   </div>
 </div>
 
+- 注意：
+App内置图标，在小程序和web无法使用。在这些平台需要单独引入字体图标库。\
+内置图标中，forward、back、down、circle，这4个图标已经不再推荐使用。后续会移除。
+因为这4个图标可以通过view的边框配合transform旋转实现，view方案性能更高且全平台支持。
+
 ### Tips
 - `字体路径`支持**网络**和**本地**，本地字体请注意放在项目或uni_modules的static目录下。
 - 全平台均支持ttf和otf字体格式，其他字体格式在不同平台支持度有差异，另见[css字体](../font-family.md)
 - @font-face是不可编程的，如需编程控制，另见[uni.loadFontFace](../../api/load-font-face.md)
-- @font-face下仅支持 font-family 和 src，不支持通过font-weight 、 font-style等属性控制该字体统一样式，如果需要设置字体样式，请在具体的text组件上使用class或style定义字体样式。
+- @font-face下仅支持 font-family 和 src，不支持通过font-weight、font-style等属性控制该字体统一样式，如果需要设置字体样式，请在具体的text组件上使用class或style定义字体样式。
 
 <style type="text/css">
 @font-face {