tmui-cli 2.0.3 → 2.0.5

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

@@ -0,0 +1,242 @@
+## padding-right
+
+CSS 属性 padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
+
+### 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 |
+
+### 语法
+```
+padding-right: <length> | <percentage>;
+```
+
+### 值限制
+- length
+- percentage
+
+### 默认值 @default-value 
+ `0`
+
+### 注意
+- app-ios平台不支持slider、switch、web-view、image 组件
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-right.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-right.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-right
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-right
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1;">
+      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+      <view>
+        <text>padding-right: 25px</text>
+        <view class="demo-box">
+          <view class="common" style="padding-right: 25px;">
+            <view class="inner-content"></view>
+          </view>
+          <view class="common" style="padding-right: 25px;" flatten>
+            <view class="inner-content"></view>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <text>padding-right: 10%</text>
+        <view class="demo-box">
+          <view class="common" style="padding-right: 10%;">
+            <view class="inner-content"></view>
+          </view>
+          <view class="common" style="padding-right: 10%;" flatten>
+            <view class="inner-content"></view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">scroll-view 组件</text>
+      </view>
+
+      <view>
+        <text class="uni-subtitle-text">padding-right: 10% 和 padding-right: 30px</text>
+        <view class="demo-box">
+          <scroll-view class="common" style="padding-right: 10%;">
+            <view class="inner-content"></view>
+          </scroll-view>
+          <scroll-view class="common" style="padding-right: 30px;">
+            <view class="inner-content"></view>
+          </scroll-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.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActual}}</text>
+          <view class="test-box">
+            <view ref="viewRef" class="common-view test-view" :style="{ paddingRight: data.paddingRight }">
+              <view style="flex-grow: 1;background-color: cyan;"><text class="cyan-text">view</text></view>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActualText}}</text>
+          <view class="test-box">
+            <text ref="textRef" class="common-text test-text" :style="{ paddingRight: data.paddingRight }">当前为text组件</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRef" class="common-image test-image" :style="{ paddingRight: data.paddingRight }" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActualFlat}}</text>
+          <view class="test-box">
+            <view ref="viewRefFlat" class="common-view test-view-flatten" :style="{ paddingRight: data.paddingRight }" flatten>
+              <view style="flex-grow: 1;background-color: cyan;"><text class="cyan-text">view</text></view>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActualTextFlat}}</text>
+          <view class="test-box">
+            <text ref="textRefFlat" class="common-text test-text-flatten" :style="{ paddingRight: data.paddingRight }" flatten>当前为text组件</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingRight}}</text>
+          <text class="uni-info">获取值: {{data.paddingRightActualImageFlat}}</text>
+          <view class="test-box">
+            <image ref="imageRefFlat" class="common-image test-image-flatten" :style="{ paddingRight: data.paddingRight }" flatten src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="paddingRightEnum" title="padding-right 枚举值" @change="radioChangePaddingRight" :compact="true"></enum-data>
+        <input-data :defaultValue="data.paddingRight" title="padding-right 自定义值" type="text" @confirm="inputChangePaddingRight"></input-data>
+      </view>
+
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .common {
+    flex:1;
+    margin:0 10px;
+    height: 100px;
+    background-color: gray;
+  }
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+  .inner-content {
+    flex-grow: 1;
+    background-color: cyan;
+  }
+
+  .cyan-text {
+    color: #1a1a1a;
+  }
+
+  .common-view {
+    height: 80px;
+    background-color: gray;
+  }
+
+  .common-text {
+    height: 80px;
+    background-color: gray;
+    /* 为了加强视觉效果 */
+    max-width: 100px;
+  }
+
+  .common-image {
+    width: 80px;
+    height: 80px;
+    background-color: gray;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 100px;
+    background-color: lightgray;
+  }
+
+  .native-view-container-large {
+    width: 120px;
+    height: 120px;
+    background-color: #e0e0e0;
+    border: 2px solid #999;
+    margin: 0 10px;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .native-view-padding-large {
+    height: 100%;
+    background-color: cyan;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-right)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-right)

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

@@ -0,0 +1,234 @@
+## padding-top
+
+CSS 属性 padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种 CSS 缩写属性。
+
+### 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 |
+
+### 语法
+```
+padding-top: <length> | <percentage>;
+```
+
+### 值限制
+- length
+- percentage
+
+### 默认值 @default-value 
+ `0`
+
+### 注意
+- app-ios平台不支持slider、switch、web-view、image 组件
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/padding/padding-top.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/padding/padding-top.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/padding/padding-top
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/padding/padding-top
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1;">
+      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+      <view>
+        <text>padding-top: 25px</text>
+        <view class="demo-box">
+          <view class="common" style="padding-top: 25px;">
+            <view class="inner-content"></view>
+          </view>
+          <view class="common" style="padding-top: 25px;" flatten>
+            <view class="inner-content"></view>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <text>padding-top: 10%</text>
+        <view class="demo-box">
+          <view class="common" style="padding-top: 10%;">
+            <view class="inner-content"></view>
+          </view>
+          <view class="common" style="padding-top: 10%;" flatten>
+            <view class="inner-content"></view>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">scroll-view 组件</text>
+      </view>
+
+      <view>
+        <text class="uni-subtitle-text">padding-top: 10% 和 padding-top: 30px</text>
+        <view class="demo-box">
+          <scroll-view class="common" style="padding-top: 10%;">
+            <view class="inner-content"></view>
+          </scroll-view>
+          <scroll-view class="common" style="padding-top: 30px;">
+            <view class="inner-content"></view>
+          </scroll-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.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActual}}</text>
+          <view class="test-box">
+            <view ref="viewRef" class="common-dynamic test-view" :style="{ paddingTop: data.paddingTop }">
+              <view style="flex-grow: 1;background-color: cyan;"><text class="cyan-text">view</text></view>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActualText}}</text>
+          <view class="test-box">
+            <text ref="textRef" class="common-dynamic test-text" :style="{ paddingTop: data.paddingTop }">text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRef" class="common-image test-image" :style="{ paddingTop: data.paddingTop }" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActualFlat}}</text>
+          <view class="test-box">
+            <view ref="viewRefFlat" class="common-dynamic test-view-flatten" :style="{ paddingTop: data.paddingTop }" flatten>
+              <view style="flex-grow: 1;background-color: cyan;"><text class="cyan-text">view</text></view>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActualTextFlat}}</text>
+          <view class="test-box">
+            <text ref="textRefFlat" class="common-dynamic test-text-flatten" :style="{ paddingTop: data.paddingTop }" flatten>text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件拍平</text>
+          <text class="uni-info">设置值: {{data.paddingTop}}</text>
+          <text class="uni-info">获取值: {{data.paddingTopActualImageFlat}}</text>
+          <view class="test-box">
+            <image ref="imageRefFlat" class="common-image test-image-flatten" :style="{ paddingTop: data.paddingTop }" flatten src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="paddingTopEnum" title="padding-top 枚举值" @change="radioChangePaddingTop" :compact="true"></enum-data>
+        <input-data :defaultValue="data.paddingTop" title="padding-top 自定义值" type="text" @confirm="inputChangePaddingTop"></input-data>
+      </view>
+
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .common {
+    flex:1;
+    margin:0 10px;
+    height: 100px;
+    background-color: gray;
+  }
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+  .inner-content {
+    flex-grow: 1;
+    background-color: cyan;
+  }
+
+  .cyan-text {
+    color: #1a1a1a;
+  }
+
+  .common-dynamic {
+    height: 80px;
+    background-color: gray;
+  }
+
+  .common-image {
+    width: 80px;
+    height: 80px;
+    background-color: gray;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 80px;
+    background-color: lightgray;
+  }
+
+  .native-view-container-large {
+    width: 120px;
+    height: 120px;
+    background-color: #e0e0e0;
+    border: 2px solid #999;
+    margin: 0 10px;
+    align-items: flex-start;
+  }
+
+  .native-view-padding-large {
+    width: 100%;
+    background-color: cyan;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/padding-top)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.padding.padding-top)