feat: 样式优化

ant-design · Sep 19, 2024 · e4c9202 · e4c9202
1 parent d212287
commit e4c9202
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 20 deletions.
diff --git a/compiled/alipay/demo/pages/Grid/index.axml b/compiled/alipay/demo/pages/Grid/index.axml
@@ -1,14 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{items2}}"
-    onTap="handleTapItem"
-    columns="{{2}}"
-  ></ant-grid>
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{items3}}"
     onTap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{3}}"
   ></ant-grid>
 </ant-container>
@@ -26,6 +20,13 @@
     columns="{{5}}"
   ></ant-grid>
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{[...items5, ...items5]}}"
+    onTap="handleTapItem"
+    columns="{{5}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{items5}}"
@@ -38,12 +39,14 @@
   <ant-grid
     items="{{items2withDesc}}"
     onTap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{2}}"
   ></ant-grid>
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{items3withDesc}}"
+    iconSize="{{36}}"
     onTap="handleTapItem"
     columns="{{3}}"
   ></ant-grid>
@@ -56,6 +59,14 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{items4}}"
+    gridItemLayout="horizontal"
+    onTap="handleTapItem"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{items3}}"
@@ -64,13 +75,45 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{items2withDesc}}"
+    onTap="handleTapItem"
+    iconSize="{{36}}"
+    gridItemLayout="horizontal"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{scrollItems}}"
     onTap="handleTapItem"
     mode="scroll"
   ></ant-grid>
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicatorDots="{{true}}"
+    autoplay="{{true}}"
+    vertical="{{false}}"
+    interval="{{1000}}"
+    circular="{{false}}"
+    duration="{{1500}}"
+  >
+    <swiper-item
+      a:for="{{[1, 2, 3, 4]}}"
+      a:for-index="index"
+      a:for-item="item"
+      key="{{'swiper-item-' + index}}"
+    >
+      <ant-grid
+        items="{{[...items5, ...items5]}}"
+        onTap="handleTapItem"
+        columns="{{5}}"
+      ></ant-grid>
+    </swiper-item>
+  </swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{itemsCustom}}"

diff --git a/compiled/alipay/demo/pages/Grid/index.less b/compiled/alipay/demo/pages/Grid/index.less
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator  {
+  bottom: -20rpx !important;
+}
diff --git a/compiled/alipay/src/Grid/index.less b/compiled/alipay/src/Grid/index.less
@@ -55,6 +55,9 @@
         top: 0;
         bottom: 0;
         margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
       .@{gridPrefix}-item-title {
         margin-top: 0;

diff --git a/compiled/wechat/demo/pages/Grid/index.wxml b/compiled/wechat/demo/pages/Grid/index.wxml
@@ -1,14 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{items2}}"
-    bind:tap="handleTapItem"
-    columns="{{2}}"
-  ></ant-grid>
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{items3}}"
     bind:tap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{3}}"
   ></ant-grid>
 </ant-container>
@@ -26,6 +20,13 @@
     columns="{{5}}"
   ></ant-grid>
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{[...items5, ...items5]}}"
+    bind:tap="handleTapItem"
+    columns="{{5}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{items5}}"
@@ -38,12 +39,14 @@
   <ant-grid
     items="{{items2withDesc}}"
     bind:tap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{2}}"
   ></ant-grid>
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{items3withDesc}}"
+    iconSize="{{36}}"
     bind:tap="handleTapItem"
     columns="{{3}}"
   ></ant-grid>
@@ -56,6 +59,14 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{items4}}"
+    gridItemLayout="horizontal"
+    bind:tap="handleTapItem"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{items3}}"
@@ -64,13 +75,45 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{items2withDesc}}"
+    bind:tap="handleTapItem"
+    iconSize="{{36}}"
+    gridItemLayout="horizontal"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{scrollItems}}"
     bind:tap="handleTapItem"
     mode="scroll"
   ></ant-grid>
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicatorDots="{{true}}"
+    autoplay="{{true}}"
+    vertical="{{false}}"
+    interval="{{1000}}"
+    circular="{{false}}"
+    duration="{{1500}}"
+  >
+    <swiper-item
+      wx:for="{{[1, 2, 3, 4]}}"
+      wx:for-index="index"
+      wx:for-item="item"
+      key="{{'swiper-item-' + index}}"
+    >
+      <ant-grid
+        items="{{[...items5, ...items5]}}"
+        bind:tap="handleTapItem"
+        columns="{{5}}"
+      ></ant-grid>
+    </swiper-item>
+  </swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{itemsCustom}}"

diff --git a/compiled/wechat/demo/pages/Grid/index.wxss b/compiled/wechat/demo/pages/Grid/index.wxss
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator {
+  bottom: -20rpx !important;
+}
diff --git a/compiled/wechat/src/Grid/index.wxss b/compiled/wechat/src/Grid/index.wxss
@@ -65,6 +65,9 @@
   top: 0;
   bottom: 0;
   margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .ant-grid-item-horizontal .ant-grid-item-title {
   margin-top: 0;

diff --git a/demo/pages/Grid/index.axml b/demo/pages/Grid/index.axml
@@ -1,13 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{ items2 }}"
-    onTap="handleTapItem"
-    columns="{{ 2 }}" />
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{ items3 }}"
     onTap="handleTapItem"
+    iconSize="{{ 36 }}"
     columns="{{ 3 }}" />
 </ant-container>
 <ant-container title="4列">
@@ -22,6 +17,12 @@
     onTap="handleTapItem"
     columns="{{ 5 }}" />
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{ [...items5, ...items5] }}"
+    onTap="handleTapItem"
+    columns="{{ 5 }}" />
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{ items5 }}"
@@ -33,11 +34,13 @@
   <ant-grid
     items="{{ items2withDesc }}"
     onTap="handleTapItem"
+    iconSize="{{ 36 }}"
     columns="{{ 2 }}" />
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{ items3withDesc }}"
+    iconSize="{{ 36 }}"
     onTap="handleTapItem"
     columns="{{ 3 }}" />
 </ant-container>
@@ -48,19 +51,52 @@
     columns="{{ 2 }}"
     gridItemLayout="horizontal" />
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{ items4 }}"
+    gridItemLayout="horizontal"
+    onTap="handleTapItem"
+    columns="{{ 2 }}" />
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{ items3 }}"
     onTap="handleTapItem"
     columns="{{ 3 }}"
     gridItemLayout="horizontal" />
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{ items2withDesc }}"
+    onTap="handleTapItem"
+    iconSize="{{ 36 }}"
+    gridItemLayout="horizontal"
+    columns="{{ 2 }}" />
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{ scrollItems }}"
     onTap="handleTapItem"
     mode="scroll" />
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicator-dots="{{ true }}"
+    autoplay="{{ true }}"
+    vertical="{{ false }}"
+    interval="{{ 1000 }}"
+    circular="{{ false }}"
+    duration="{{ 1500 }}"
+>
+  <swiper-item key="swiper-item-{{index}}" a:for="{{[1,2,3,4]}}">
+    <ant-grid
+      items="{{ [...items5, ...items5] }}"
+      onTap="handleTapItem"
+      columns="{{ 5 }}"
+     />
+    </swiper-item>
+</swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{ itemsCustom }}"

diff --git a/demo/pages/Grid/index.less b/demo/pages/Grid/index.less
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator  {
+  bottom: -20rpx !important;
+}
diff --git a/src/Grid/index.less b/src/Grid/index.less
@@ -55,6 +55,9 @@
         top: 0;
         bottom: 0;
         margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
       .@{gridPrefix}-item-title {
         margin-top: 0;