tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/css/flex-flow.md

@@ -0,0 +1,283 @@
+## flex-flow
+
+flex-flow 属性设置弹性容器中子元素的布局主轴方向及单或多行（列）堆叠方向，，是 flex-direction、flex-wrap 的简写。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+flex-flow: <'flex-direction'> || <'flex-wrap'>;
+```
+
+### 值限制
+- enum
+
+### flex-flow 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| column | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 主轴为垂直方向，起点在上沿。 |
+| column-reverse | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 主轴为垂直方向（与column相同），起点在下沿（与column相反）。 |
+| row | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 主轴为水平方向，起点在左端。 |
+| row-reverse | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 主轴为水平方向（与row相同），起点在右端（与row相反）。 |
+| nowrap | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不换行。 |
+| wrap | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 换行，第一行在上方。 |
+| wrap-reverse | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 换行（与wrap相同），第一行在下方（与wrap相反）。 |
+
+### 适用组件 @unix-tags 
+ - view
+- scroll-view
+- list-view
+- list-item
+- flow-item
+- swiper-item
+- navigator
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-flow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-flow.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-flow
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-flow
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1">
+      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+      <view>
+        <text>flex-flow: row nowrap</text>
+        <view class="demo-box">
+          <view class="common" style="flex-flow: row nowrap">
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+          </view>
+          <view class="common" style="flex-flow: row nowrap" flatten>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <text>flex-flow: row wrap</text>
+        <view class="demo-box">
+          <view class="common" style="flex-flow: row wrap">
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+          </view>
+          <view class="common" style="flex-flow: row wrap" flatten>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <text>flex-flow: column nowrap</text>
+        <view class="demo-box">
+          <view class="common" style="flex-flow: column nowrap">
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+          </view>
+          <view class="common" style="flex-flow: column nowrap" flatten>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <text>flex-flow: column wrap</text>
+        <view class="demo-box">
+          <view class="common" style="flex-flow: column wrap">
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+            <view class="flex-item red"></view>
+            <view class="flex-item green"></view>
+            <view class="flex-item blue"></view>
+          </view>
+          <view class="common" style="flex-flow: column wrap" flatten>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+            <view class="flex-item red" flatten></view>
+            <view class="flex-item green" flatten></view>
+            <view class="flex-item blue" flatten></view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">scroll-view 组件</text>
+        <text class="uni-subtitle-text">flex-flow: row wrap 和 flex-flow: column nowrap</text>
+      </view>
+
+      <view class="demo-box">
+        <scroll-view class="common" style="flex-flow: row wrap;" direction="horizontal">
+          <view class="flex-item red"></view>
+          <view class="flex-item green"></view>
+          <view class="flex-item blue"></view>
+          <view class="flex-item red"></view>
+          <view class="flex-item green"></view>
+          <view class="flex-item blue"></view>
+        </scroll-view>
+        <scroll-view class="common" style="flex-flow: column nowrap;" direction="horizontal">
+          <view class="flex-item red"></view>
+          <view class="flex-item green"></view>
+          <view class="flex-item blue"></view>
+          <view class="flex-item red"></view>
+          <view class="flex-item green"></view>
+          <view class="flex-item blue"></view>
+        </scroll-view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      <view class="common-box">
+        
+        <view class="uni-common-mt">
+          <text class="uni-title-text">flex-flow</text>
+          <text class="uni-info">设置值: {{data.flexFlow}}</text>
+          <text class="uni-info">获取值: {{data.flexFlowActual}}</text>
+          <view class="test-box">
+            <view ref="viewRef" class="test-flex-container test-view" :style="{ flexFlow: data.flexFlow }">
+              <view class="test-item red"></view>
+              <view class="test-item green"></view>
+              <view class="test-item blue"></view>
+              <view class="test-item red"></view>
+              <view class="test-item green"></view>
+              <view class="test-item blue"></view>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="uni-common-mt">
+          <text class="uni-title-text">拍平</text>
+          <text class="uni-info">设置值: {{data.flexFlow}}</text>
+          <text class="uni-info">获取值: {{data.flexFlowActualFlat}}</text>
+          <view class="test-box">
+            <view ref="viewRefFlat" class="test-flex-container test-view-flatten" :style="{ flexFlow: data.flexFlow }" flatten>
+              <view class="test-item red" flatten></view>
+              <view class="test-item green" flatten></view>
+              <view class="test-item blue" flatten></view>
+              <view class="test-item red" flatten></view>
+              <view class="test-item green" flatten></view>
+              <view class="test-item blue" flatten></view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+          <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+          <enum-data :items="flexFlowEnum" title="flex-flow 枚举值" @change="radioChangeFlexFlow" :compact="true"></enum-data>
+          <input-data :defaultValue="data.flexFlow" title="flex-flow 自定义值" type="text" @confirm="inputChangeFlexFlow"></input-data>
+      </view>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+
+  .common {
+    flex: 1;
+    margin: 0 10px;
+    height: 190px;
+    background-color: gray;
+  }
+
+  .flex-item {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border-bottom:#ddd solid 1px;
+  }
+  .red {
+    background-color: red;
+  }
+  .green {
+    background-color: green;
+  }
+  .blue {
+    background-color: blue;
+  }
+  .common-box{
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  .test-box {
+    width: 180px;
+    height: 180px;
+    background-color: gray;
+  }
+
+  .test-flex-container {
+    width: 100%;
+    height: 100%;
+    background-color: gray;
+  }
+
+  .test-item {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+  }
+
+  .scroll-view-label {
+    font-size: 12px;
+    text-align: center;
+  }
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-flow)

package/data/uniappx/css/flex-grow.md

@@ -0,0 +1,318 @@
+## flex-grow
+
+flex-grow 属性设置弹性元素在主轴方向的增长系数。此属性定义了元素在弹性容器中分配主轴方向剩余空间的相对比例（即弹性增长因子），增长的可能是弹性元素的宽度或高度，取决于 flex-direction 值。<br/>剩余空间是指弹性容器尺寸减去所有子元素尺寸之和后的空间。若所有子元素有相同的增长系数，则各子元素将获得等量的剩余空间，否则按不同增长系数的比例进行分配。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+flex-grow: <number>;
+```
+
+### 值限制
+- number
+
+### 默认值 @default-value 
+ `0`
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/flex-grow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/flex-grow.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/flex-grow
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/flex-grow
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1">
+      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+      <view>
+        <text>flex-grow</text>
+        <view class="demo-box">
+          <view class="flex-container">
+            <view class="common red" style="flex-grow: 0.5">
+              <text>0.5</text>
+            </view>
+            <view class="common green" style="flex-grow: 1">
+              <text>1</text>
+            </view>
+            <view class="common blue" style="flex-grow: 2">
+              <text>2</text>
+            </view>
+          </view>
+          <view class="flex-container">
+            <view class="common red" style="flex-grow: 0.5" flatten>
+              <text>0.5</text>
+            </view>
+            <view class="common green" style="flex-grow: 1" flatten>
+              <text>1</text>
+            </view>
+            <view class="common blue" style="flex-grow: 2" flatten>
+              <text>2</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">scroll-view 组件</text>
+      </view>
+
+      <view class="demo-box">
+        <view class="flex-container-compare" style="margin-right:10px;">
+          <view class="common red width-30-no-grow"></view>
+          <scroll-view class="scroll-view-grow green" style="flex-grow: 0.5;">
+            <text class="scroll-view-label">flex-grow: 0.5</text>
+          </scroll-view>
+          <view class="common blue width-30-no-grow"></view>
+        </view>
+        <view class="flex-container-compare">
+          <view class="common red width-30-no-grow"></view>
+          <scroll-view class="scroll-view-grow green" style="flex-grow: 1;">
+            <text class="scroll-view-label">flex-grow: 1</text>
+          </scroll-view>
+          <view class="common blue width-30-no-grow"></view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      
+      <view class="test-container">
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActual}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <view class="common-image red"></view>
+              <view ref="viewRef" class="common-image green test-view" :style="{ flexGrow: data.flexGrow }">
+                <text class="common-text">{{data.flexGrow}}</text>
+              </view>
+              <view class="common-image blue"></view>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActualText}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <text class="common-text red">红色</text>
+              <text ref="textRef" class="common-text green test-text" :style="{ flexGrow: data.flexGrow }">text</text>
+              <text class="common-text blue">蓝色</text>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActualImage}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <image class="common-image red" src="/static/test-image/logo.png"></image>
+              <image ref="imageRef" class="common-image green test-image" :style="{ flexGrow: data.flexGrow }" src="/static/test-image/logo.png"></image>
+              <image class="common-image blue" src="/static/test-image/logo.png"></image>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      
+      <view class="test-container">
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件拍平</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActualFlat}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <view class="common-image red"></view>
+              <view ref="viewRefFlat" class="common-image green test-view-flatten" :style="{ flexGrow: data.flexGrow }" flatten>
+                <text class="common-text">{{data.flexGrow}}</text>
+              </view>
+              <view class="common-image blue"></view>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件拍平</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActualTextFlat}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <text class="common-text red">红色</text>
+              <text ref="textRefFlat" class="common-text green test-text-flatten" :style="{ flexGrow: data.flexGrow }" flatten>text</text>
+              <text class="common-text blue">蓝色</text>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件拍平</text>
+          <text class="uni-info">设置值: {{data.flexGrow}}</text>
+          <text class="uni-info">获取值: {{data.flexGrowActualImageFlat}}</text>
+          <view class="test-box">
+            <view class="test-flex-container">
+              <image class="common-image red" src="/static/test-image/logo.png"></image>
+              <image ref="imageRefFlat" class="common-image green test-image-flatten" :style="{ flexGrow: data.flexGrow }" flatten src="/static/test-image/logo.png"></image>
+              <image class="common-image blue" src="/static/test-image/logo.png"></image>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="flexGrowEnum" title="flex-grow 枚举值" @change="radioChangeFlexGrow" :compact="true"></enum-data>
+        <input-data :defaultValue="data.flexGrow" title="flex-grow 自定义值" type="text" @confirm="inputChangeFlexGrow"></input-data>
+      </view>
+
+      
+        <text class="uni-title-text uni-common-mt">native-view 组件：flex-grow: 0.5 和 flex-grow: 1</text>
+        <view class="demo-box uni-common-mb">
+          <view class="flex-container-compare" style="margin-right:10px;">
+            <view class="common red width-30-no-grow"></view>
+            <test-native-view class="native-view-grow green" style="flex-grow: 0.5;"></test-native-view>
+            <view class="common blue width-30-no-grow"></view>
+          </view>
+          <view class="flex-container-compare">
+            <view class="common red width-30-no-grow"></view>
+            <test-native-view class="native-view-grow green" style="flex-grow: 1;"></test-native-view>
+            <view class="common blue width-30-no-grow"></view>
+          </view>
+        </view>
+      
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+
+  .flex-container {
+    flex: 1;
+    margin: 0 10px;
+    height: 100px;
+    background-color: gray;
+    flex-direction: row;
+  }
+  .common {
+    width: 50px;
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .common-text {
+    height: 30px;
+    background-color: green;
+    font-size: 14px;
+    color: white;
+  }
+
+  .common-image {
+    width: 30px;
+    height: 30px;
+    background-color: green;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 50px;
+    background-color: gray;
+  }
+
+  .test-flex-container {
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+  }
+
+  .red {
+    background-color: red;
+  }
+
+  .blue {
+    background-color: blue;
+  }
+
+  .green {
+    background-color: green;
+  }
+
+  .scroll-view-label {
+    font-size: 12px;
+    line-height: 50px;
+    text-align: center;
+  }
+
+  .flex-container-compare {
+    width: 180px;
+    height: 100px;
+    background-color: gray;
+    flex-direction: row;
+  }
+
+  .scroll-view-grow {
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .native-view-grow {
+    height: 50px;
+  }
+
+  .width-30-no-grow {
+    width: 30px;
+    flex-grow: 0;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex-grow)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.flex-grow)