docs(grid): update components style

Tencent · Jul 23, 2022 · 771f151 · 771f151
1 parent 6e76302
commit 771f151
Show file tree

Hide file tree

Showing 20 changed files with 395 additions and 163 deletions.
diff --git a/src/grid/README.md b/src/grid/README.md
@@ -16,6 +16,14 @@ isComponent: true
 }
 ```
 
+### 主题定制
+CSS 变量名|说明
+--|--
+--t-grid-bg-color | 宫格背景颜色
+--t-grid-item-text-color  | 宫格文本颜色
+--t-grid-item-description-color | 宫格描述信息文本颜色
+--t-grid-item-hover-bg-color | 开启点击反馈时宫格背景颜色
+
 ## 代码演示
 
 ### 一行三个带边框
@@ -65,7 +73,7 @@ isComponent: true
 | 名称             | 类型          | 默认值      | 说明                                                                                                                                  | 必传 |
 | ---------------- | ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---- |
 | description      | String / Slot | -           | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点                                                           | N    |
-| external-classes | Array         | -           | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-image', 't-class-text', 't-class-description']` | N    |
+| external-classes | Array         | -           | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-content', 't-class-image', 't-class-text', 't-class-description']` | N    |
 | image            | String / Slot | -           | 图片，可以是图片地址，也可以自定义图片节点                                                                                            | N    |
 | jump-type        | String        | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to                                                                     | N    |
 | layout           | String        | vertical    | 内容布局方式。可选项：vertical/horizontal                                                                                             | N    |

diff --git a/src/grid/_example/badge/index.wxml b/src/grid/_example/badge/index.wxml
@@ -1,20 +1,20 @@
 <t-grid class="t-grid badge">
-  <t-grid-item text="标题文字" t-class-text="text">
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image" t-class-content="external-class-content">
     <t-badge count="{{16}}" slot="image" t-class="badge-item">
       <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
     </t-badge>
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image" t-class-content="external-class-content">
     <t-badge dot slot="image" t-class="badge-item">
       <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
     </t-badge>
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image" t-class-content="external-class-content">
     <t-badge count="New" slot="image" t-class="badge-item" t-class-text="text">
       <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
     </t-badge>
   </t-grid-item>
-  <t-grid-item text="标题五字内" t-class-text="text">
+  <t-grid-item text="标题五字内" t-class-text="text" t-class-image="image" t-class-content="external-class-content">
     <t-badge count="slot" slot="image" t-class="badge-item">
       <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
       <view slot="count" class="badge-circle">

diff --git a/src/grid/_example/badge/index.wxss b/src/grid/_example/badge/index.wxss
@@ -1,19 +1,21 @@
-.text {
-  padding-top: 20rpx;
-  margin-bottom: 32rpx;
-  font-size: 24rpx;
-  line-height: 40rpx;
+.external-class-content {
+  padding: 32rpx 0 !important;
 }
 
+.text {
+  font-size: 24rpx !important;
+  line-height: 40rpx !important;
+  padding-top: 20rpx !important;
+}
+.image {
+  width: 64rpx !important;
+  height: 64rpx !important;
+}
 .image-icon {
   width: 64rpx;
   height: 64rpx;
 }
 
-.badge-item {
-  margin-top: 32rpx;
-}
-
 .badge-circle {
   display: flex;
   justify-content: center;

diff --git a/src/grid/_example/border/index.wxml b/src/grid/_example/border/index.wxml
@@ -1,11 +1,5 @@
 <t-grid class="three-border" border="{{border}}" column="{{3}}">
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
-  </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
-  </t-grid-item>
-  <t-grid-item text="标题最多六字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
-  </t-grid-item>
+  <t-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
+  <t-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
+  <t-grid-item text="标题文字" image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" />
 </t-grid>
diff --git a/src/grid/_example/border/index.wxss b/src/grid/_example/border/index.wxss
@@ -1,12 +0,0 @@
-.text {
-  font-size: 28rpx;
-  line-height: 44rpx;
-  margin-bottom: 24rpx;
-  padding-top: 20rpx;
-}
-
-.image-icon {
-  padding-top: 24rpx;
-  width: 48px;
-  height: 48px;
-}

diff --git a/src/grid/_example/five/index.wxml b/src/grid/_example/five/index.wxml
@@ -1,37 +1,37 @@
 <t-grid class="five" column="{{5}}">
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="最多四字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="最多四字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
 </t-grid>
 
 <view class="gutter-row"></view>
 
 <t-grid t-class="five-with-padding" column="{{5}}">
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="最多四字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="最多四字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
 </t-grid>
diff --git a/src/grid/_example/five/index.wxss b/src/grid/_example/five/index.wxss
@@ -1,15 +1,22 @@
 /* five */
-.text {
-  padding-top: 16rpx;
-  margin-bottom: 32rpx;
-  font-size: 24rpx;
-  line-height: 40rpx;
+.five .external-class-content {
+  padding: 32rpx 0 !important;
 }
 
 .image-icon {
-  padding-top: 32rpx;
-  width: 56rpx;
-  height: 56rpx;
+  width: 56rpx !important;
+  height: 56rpx !important;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.text {
+  font-size: 24rpx !important;
+  line-height: 40rpx !important;
+  padding-top: 16rpx !important;
 }
 
 .gutter-row {
@@ -18,20 +25,11 @@
 
 /* five-with-padding */
 .five-with-padding {
-  margin: 0 24rpx;
-  padding: 0 16rpx;
+  margin: 0 48rrpx;
+  padding: 0 32rrpx;
   border-radius: 16rpx;
 }
 
-.five-with-padding .image-icon {
-  padding-top: 32rpx;
-  width: 56rpx;
-  height: 56rpx;
-}
-
-.five-with-padding .text {
-  padding-top: 20rpx;
-  margin-bottom: 20rpx;
-  font-size: 24rpx;
-  line-height: 40rpx;
+.five-with-padding .external-class-content {
+  padding: 32rpx 0 20rpx 0 !important;
 }
diff --git a/src/grid/_example/four/index.wxml b/src/grid/_example/four/index.wxml
@@ -1,14 +1,19 @@
 <t-grid class="four">
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon" t-class-content="external-class-content">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题五字内" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item
+    text="标题五字内"
+    t-class-text="text"
+    t-class-image="image-icon"
+    t-class-content="external-class-content"
+  >
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
 </t-grid>
diff --git a/src/grid/_example/four/index.wxss b/src/grid/_example/four/index.wxss
@@ -1,12 +1,18 @@
-.text {
-  padding-top: 20rpx;
-  margin-bottom: 32rpx;
-  font-size: 24rpx;
-  line-height: 40rpx;
+.external-class-content {
+  padding: 32rpx 0 !important;
 }
 
 .image-icon {
-  padding-top: 32rpx;
-  width: 64rpx;
-  height: 64rpx;
+  width: 64rpx !important;
+  height: 64rpx !important;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.text {
+  font-size: 24rpx !important;
+  line-height: 40rpx !important;
 }
diff --git a/src/grid/_example/three-des/index.wxml b/src/grid/_example/three-des/index.wxml
@@ -1,28 +1,28 @@
 <t-grid class="three-des" column="{{3}}">
   <t-grid-item
     text="标题文字"
-    class="t-grid-item"
+    description="说明文字"
+    t-class-image="image"
     t-class-text="text"
     t-class-description="description"
-    description="说明文字"
   >
     <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
   <t-grid-item
     text="标题文字"
-    class="t-grid-item"
+    description="说明文字"
+    t-class-image="image"
     t-class-text="text"
     t-class-description="description"
-    description="说明文字"
   >
     <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
   <t-grid-item
     text="标题最多六字"
-    class="t-grid-item"
+    description="说明最多六字"
+    t-class-image="image"
     t-class-text="text"
     t-class-description="description"
-    description="说明最多六字"
   >
     <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>

diff --git a/src/grid/_example/three-des/index.wxss b/src/grid/_example/three-des/index.wxss
@@ -1,16 +1,13 @@
-.text {
-  padding-top: 20rpx;
-  font-size: 28rpx;
-  line-height: 44rpx;
+.external-class-content {
+  padding: 32rpx 0 !important;
 }
 
-.image-icon {
-  padding-top: 24rpx;
-  width: 96rpx;
-  height: 96rpx;
+.image {
+  width: 96rpx !important;
+  height: 96rpx !important;
 }
 
-.description {
-  margin-top: 8rpx;
-  margin-bottom: 24rpx;
+.image-icon {
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/grid/_example/three/index.wxml b/src/grid/_example/three/index.wxml
@@ -1,11 +1,11 @@
 <t-grid class="three" column="{{3}}">
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题文字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题文字" t-class-text="text" t-class-image="image-icon">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
-  <t-grid-item text="标题最多六字" class="t-grid-item" t-class-text="text">
-    <image class="image-icon" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
+  <t-grid-item text="标题最多六字" t-class-text="text" t-class-image="image-icon">
+    <image class="image" src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" slot="image" />
   </t-grid-item>
 </t-grid>
diff --git a/src/grid/_example/three/index.wxss b/src/grid/_example/three/index.wxss
@@ -1,12 +1,13 @@
-.text {
-  padding-top: 20rpx;
-  margin-bottom: 24rpx;
-  font-size: 28rpx;
-  line-height: 44rpx;
+.external-class-content {
+  padding: 32rpx 0 !important;
 }
 
 .image-icon {
-  padding-top: 24rpx;
-  width: 96rpx;
-  height: 96rpx;
+  width: 96rpx !important;
+  height: 96rpx !important;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
 }