chore(Modal): adjust style & add zIndex disableSrcoll animation props… (

#128) * chore(Modal): adjust style & add zIndex disableSrcoll animation props in Modal and Dialog * chore(Icon): support fontSize prop Co-authored-by: 陌缓 <[email protected]>
ant-design · Jun 2, 2022 · a59ec63 · a59ec63
1 parent 20a56cf
commit a59ec63
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 54 deletions.
diff --git a/demo/pages/Modal/index.axml b/demo/pages/Modal/index.axml
@@ -20,7 +20,7 @@
   </modal>
   <modal
     visible="{{isCustomBtnModalShow}}"
-    content="人在天边月上明，风初紧，吹入画帘旌"
+    content="人在天边月上明"
     mainButtonText="在线阅读"
     addonButtonText="下载文件"
     maskClosable="{{false}}"
@@ -29,7 +29,7 @@
   </modal>
   <modal
     visible="{{isMainBtnModalShow}}"
-    content="人在天边月上明，风初紧，吹入画帘旌"
+    content="人在天边月上明"
     mainButtonText="在线阅读"
     addonButtonText=""
     maskClosable="{{false}}"

diff --git a/src/Dialog/index.axml b/src/Dialog/index.axml
@@ -3,12 +3,16 @@
   visible="{{visible}}" 
   maskClosable="{{maskClosable}}"
   duration="{{duration}}"
+  disableScroll="{{disableScroll}}"
+  animation="{{animation}}"
+  zIndex="{{zIndex}}"
   onClose="onClose">
   <view class="amd-dialog-content">
     <view class="amd-dialog-content-image-container">
-    <image class="amd-dialog-content-image amd-dialog-content-image-{{imageSize}}"
-      src="{{image}}"
-      a:if="{{image}}" />
+      <image class="amd-dialog-content-image amd-dialog-content-image-{{imageSize}}"
+        src="{{image}}"
+        a:if="{{image}}"
+      />
     </view>
     <view class="amd-dialog-content-title">
         {{title}}

diff --git a/src/Dialog/index.less b/src/Dialog/index.less
@@ -48,7 +48,7 @@
       }
       &:empty ~ .amd-dialog-content-content {
         margin-bottom: 5 * @rpx;
-        margin-top: 16 * @rpx;
+        margin-top: 40 * @rpx;
       }
     }
 

diff --git a/src/Dialog/index.md b/src/Dialog/index.md
@@ -27,6 +27,9 @@ toc: false
 | visible | boolean | 是 | false | 是否可见，受控模式 |
 | duration | number | 否 | 300 | 过渡动画时长，单位毫秒 |
 | maskClosable | boolean | 否 | true | 点击蒙层关闭 |
+| disableScroll | boolean | 否 | true | 弹窗展示时，是否禁止页面滚动 |
+| animation | boolean | 否 | true | 是否开启过渡动画 |
+| zIndex | number | 否 | 998 | 弹窗层级 |
 | className | string | 否 | - | 类名 |
 
 ## 事件
@@ -57,17 +60,17 @@ toc: false
 
 
 <style> 
-table th:first-of-type { width: 180px; } 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 50px
-} 
-.__dumi-default-layout-content article table:nth-of-type(4) th:first-of-type  {
-    width: 300px
-} 
+table th:first-of-type { width: 180px; }
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 50px;
+}
+.__dumi-default-layout-content article table:nth-of-type(4) th:first-of-type {
+    width: 300px;
+}
 </style> 
diff --git a/src/Icon/index.axml b/src/Icon/index.axml
@@ -1,6 +1,6 @@
 <import-sjs name="icon"
   from='./index.sjs' />
 <text class="amd-icon amd-icon-{{type}} {{icon.getSize(size)}} {{className ? className : ''}}"
-  style="{{color ? `color: ${color};` : ''}}"
+  style="{{color ? `color: ${color};` : ''}} {{fontSize ? `font-size: ${fontSize};`: ''}}"
   onTap="onTap">
 </text>
diff --git a/src/Icon/index.md b/src/Icon/index.md
@@ -23,6 +23,7 @@ toc: false
 | type | string | 是 | "" | icon 图标的类型 |
 | size | 'x-small' &verbar; 'small' &verbar; 'medium' &verbar; 'large' &verbar; 'x-large' | 否 | "medium" | icon 的大小，x-small(16)、small(32)、medium(48)、large(64)、x-large(128)， |
 | color | string | 否 | - | icon 的颜色，即 CSS 中 color 属性的值 |
+| fontSize | string | 否 | - | icon 的大小 |
 | className | string | 否 | - | 类名 |
 
 ## 事件
@@ -37,15 +38,15 @@ toc: false
 | amd-icon | 整体样式 |
 
 <style> 
-table th:first-of-type { width: 180px; } 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 50px
-} 
+table th:first-of-type { width: 180px; }
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 50px;
+}
 
 </style> 
diff --git a/src/Modal/index.axml b/src/Modal/index.axml
@@ -3,6 +3,9 @@
   visible="{{visible}}" 
   duration="{{duration}}"
   maskClosable="{{maskClosable}}"
+  disableScroll="{{disableScroll}}"
+  animation="{{animation}}"
+  zIndex="{{zIndex}}"
   onClose="onClose">
   <view class="amd-modal-content">
     <view class="amd-modal-content-image-container">

diff --git a/src/Modal/index.md b/src/Modal/index.md
@@ -29,6 +29,9 @@ toc: false
 | mainButtonText | string | 否 | '主操作' | 主按钮 |
 | addonButtonText | string | 否 | '辅助操作' | 辅助按钮，第二个按钮 |
 | maskClosable | boolean | 否 | true | 点击蒙层关闭 |
+| disableScroll | boolean | 否 | true | 弹窗展示时，是否禁止页面滚动 |
+| animation | boolean | 否 | true | 是否开启过渡动画 |
+| zIndex | number | 否 | 998 | 弹窗层级 |
 | className | string | 否 | - | 类名 |
 
 ## 事件
@@ -58,17 +61,17 @@ toc: false
 | amd-modal-close | close 图标样式 |
 
 <style> 
-table th:first-of-type { width: 180px; } 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
-} 
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 50px
-} 
-.__dumi-default-layout-content article table:nth-of-type(4) th:first-of-type  {
-    width: 300px
-} 
+table th:first-of-type { width: 180px; }
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
+}
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 50px;
+}
+.__dumi-default-layout-content article table:nth-of-type(4) th:first-of-type {
+    width: 300px;
+}
 </style> 
diff --git a/src/Popup/index.axml b/src/Popup/index.axml
@@ -13,7 +13,7 @@
     onTouchMove="{{disableScroll && supportSjs ? _sjs.enableScrollEvent : ''}}"
   >
   <view class="amd-popup-close-container" a:if="{{showCloseIcon}}">
-    <icon type="CloseOutline" size="x-small" onTap="onClose"/>
+    <icon type="CloseOutline"  onTap="onClose"/>
   </view>
     <view>
       <slot />

diff --git a/src/Popup/index.less b/src/Popup/index.less
@@ -19,7 +19,7 @@
       justify-content: center;
       right: 24 * @rpx;
       .amd-icon {
-        font-size: 26 * @rpx;
+        font-size: 36 * @rpx;
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/Popup/index.md b/src/Popup/index.md
@@ -25,7 +25,6 @@ toc: false
 
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
 | -----|-----|-----|-----|----- |
-| className | string | 否 | - | 类名 |
 | visible | boolean | 否 | false | 是否显示 |
 | maskClosable | boolean | 否 | false | 点击蒙层是否可以关闭 |
 | showCloseIcon | boolean | 否 | false | 是否展示关闭图标 |
@@ -34,8 +33,7 @@ toc: false
 | duration | number | 否 | 300 | 过渡动画时长，单位毫秒 |
 | position | 'center' &verbar; 'top' &verbar; 'bottom' &verbar; 'left' &verbar; 'right' | 否 | 'center' | 弹窗布局 |
 | zIndex | number | 否 | 998 | 弹窗层级 |
-
-
+| className | string | 否 | - | 类名 |
 
 ## 事件
 
@@ -63,13 +61,13 @@ toc: false
 
 <style>
 table th:first-of-type { width: 180px; }
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2)  {
-    width: 140px
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(2) {
+    width: 140px;
 }
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3)  {
-    width: 30px
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(3) {
+    width: 30px;
 }
-.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4)  {
-    width: 110px
+.__dumi-default-layout-content article table:first-of-type th:nth-of-type(4) {
+    width: 110px;
 }
 </style>