From 771f151cc40e87b2d5efae521eee9e30ce5bffd0 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 21 Jul 2022 16:38:29 +0800 Subject: [PATCH] docs(grid): update components style --- src/grid/README.md | 10 +- src/grid/_example/badge/index.wxml | 8 +- src/grid/_example/badge/index.wxss | 20 +-- src/grid/_example/border/index.wxml | 12 +- src/grid/_example/border/index.wxss | 12 -- src/grid/_example/five/index.wxml | 40 +++--- src/grid/_example/five/index.wxss | 40 +++--- src/grid/_example/four/index.wxml | 21 +-- src/grid/_example/four/index.wxss | 22 +-- src/grid/_example/three-des/index.wxml | 12 +- src/grid/_example/three-des/index.wxss | 19 ++- src/grid/_example/three/index.wxml | 12 +- src/grid/_example/three/index.wxss | 17 +-- src/grid/_example/two-des/index.wxml | 18 +-- src/grid/_example/two-des/index.wxss | 14 +- src/grid/grid-item.less | 57 +++++++- src/grid/grid-item.ts | 9 +- src/grid/grid-item.wxml | 21 +-- src/grid/grid.less | 8 +- src/indexes/_example/display/data.js | 186 +++++++++++++++++++++++++ 20 files changed, 395 insertions(+), 163 deletions(-) create mode 100644 src/indexes/_example/display/data.js diff --git a/src/grid/README.md b/src/grid/README.md index 9d407b898..a948f1ec9 100644 --- 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 index 5a8d97ced..91531345b 100644 --- a/src/grid/_example/badge/index.wxml +++ b/src/grid/_example/badge/index.wxml @@ -1,20 +1,20 @@ - + - + - + - + diff --git a/src/grid/_example/badge/index.wxss b/src/grid/_example/badge/index.wxss index e977b5576..ac9708c32 100644 --- 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 index 5a0151ded..1e7b94423 100644 --- a/src/grid/_example/border/index.wxml +++ b/src/grid/_example/border/index.wxml @@ -1,11 +1,5 @@ - - - - - - - - - + + + diff --git a/src/grid/_example/border/index.wxss b/src/grid/_example/border/index.wxss index 584a0d113..e69de29bb 100644 --- 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 index 6a14a4f87..114749ad2 100644 --- a/src/grid/_example/five/index.wxml +++ b/src/grid/_example/five/index.wxml @@ -1,37 +1,37 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/src/grid/_example/five/index.wxss b/src/grid/_example/five/index.wxss index 53a6fe516..503fa5be1 100644 --- 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 index 254b91126..4ab1f5fa8 100644 --- a/src/grid/_example/four/index.wxml +++ b/src/grid/_example/four/index.wxml @@ -1,14 +1,19 @@ - - + + - - + + - - + + - - + + diff --git a/src/grid/_example/four/index.wxss b/src/grid/_example/four/index.wxss index daceb2302..47586ea6f 100644 --- 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 index 0377e9c31..97d46e4b9 100644 --- a/src/grid/_example/three-des/index.wxml +++ b/src/grid/_example/three-des/index.wxml @@ -1,28 +1,28 @@ diff --git a/src/grid/_example/three-des/index.wxss b/src/grid/_example/three-des/index.wxss index fbae8c509..9f5e6ef8a 100644 --- 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 index 65835ec48..87e4599ec 100644 --- a/src/grid/_example/three/index.wxml +++ b/src/grid/_example/three/index.wxml @@ -1,11 +1,11 @@ - - + + - - + + - - + + diff --git a/src/grid/_example/three/index.wxss b/src/grid/_example/three/index.wxss index c17a54581..e912b8eaf 100644 --- 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%; } diff --git a/src/grid/_example/two-des/index.wxml b/src/grid/_example/two-des/index.wxml index cbf63040e..ca84f6e93 100644 --- a/src/grid/_example/two-des/index.wxml +++ b/src/grid/_example/two-des/index.wxml @@ -1,20 +1,8 @@ - - + + - + diff --git a/src/grid/_example/two-des/index.wxss b/src/grid/_example/two-des/index.wxss index 052f66118..2174cc09f 100644 --- a/src/grid/_example/two-des/index.wxss +++ b/src/grid/_example/two-des/index.wxss @@ -1,15 +1,13 @@ -.text { - padding-top: 28rpx; - padding-left: 24rpx; +.two-des { + padding: 0 32rpx !important; } -.image-icon { - padding: 24rpx 0 24rpx 32rpx; +.image { width: 96rpx; height: 96rpx; } -.description { - padding-left: 24rpx; - padding-top: 8rpx; +.image-icon { + width: 100%; + height: 100%; } diff --git a/src/grid/grid-item.less b/src/grid/grid-item.less index a33e3c7e7..179156638 100644 --- a/src/grid/grid-item.less +++ b/src/grid/grid-item.less @@ -1,25 +1,61 @@ @import '../common/style/index.less'; +@grid-item-padding: 24rpx; +@grid-item-bg-color: #ffffff; +@grid-item-image-width: 96rpx; +@grid-item-text-color: rgba(0, 0, 0, 0.9); +@grid-item-text-font-size: 28rpx; +@grid-item-text-line-height: 44rpx; +@grid-item-text-padding-top: 16rpx; +@grid-item-description-font-size: 24rpx; +@grid-item-description-line-height: 40rpx; +@grid-item-description-color: rgba(0, 0, 0, 0.4); +@grid-item-description-padding-top: 8rpx; +@grid-item-hover-bg-color: #f2f3f5; +@grid-item-horizontal-text-padding-left: 24rpx; +@grid-item-horizontal-text-description-top: 4rpx; + +page { + --t-grid-item-bg-color: @grid-item-bg-color; + --t-grid-item-text-color: @grid-item-text-color; + --t-grid-item-description-color: @grid-item-description-color; + --t-grid-item-hover-bg-color: @grid-item-hover-bg-color; +} + .@{prefix}-grid-item { box-sizing: border-box; height: 100%; float: left; &--hover { - background-color: #f2f3f5; + background-color: var(--t-grid-item-hover-bg-color); } &--horizontal { .@{prefix}-grid-item__content { flex-direction: row; } + + .@{prefix}-grid-item__text { + padding-top: 0; + padding-left: @grid-item-horizontal-text-padding-left; + } + + .@{prefix}-grid-item__description { + padding-top: @grid-item-horizontal-text-description-top; + padding-left: @grid-item-horizontal-text-padding-left; + } + } + &__wrapper { } &__content { display: flex; flex-direction: column; + align-items: center; overflow: hidden; position: relative; + padding: @grid-item-padding 0; } &__words { @@ -32,8 +68,12 @@ } &__image { - display: flex; - // flex: 1; + width: @grid-item-image-width; + height: @grid-item-image-width; + .external-class { + width: 100%; + height: 100%; + } } &--center { @@ -52,11 +92,16 @@ } &__text { - font-size: 28rpx; + color: var(--t-grid-item-text-color); + font-size: @grid-item-text-font-size; + line-height: @grid-item-text-line-height; + padding-top: @grid-item-text-padding-top; } &__description { - font-size: 24rpx; - color: rgba(0, 0, 0, 0.4); + color: var(--t-grid-item-description-color); + font-size: @grid-item-description-font-size; + line-height: @grid-item-description-line-height; + padding-top: @grid-item-description-padding-top; } } diff --git a/src/grid/grid-item.ts b/src/grid/grid-item.ts index 734bf8414..fee4d0d92 100644 --- a/src/grid/grid-item.ts +++ b/src/grid/grid-item.ts @@ -13,7 +13,13 @@ enum LinkTypes { @wxComponent() export default class GridItem extends SuperComponent { - externalClasses = ['t-class', 't-class-image', 't-class-text', 't-class-description']; + externalClasses = [ + `${prefix}-class`, + `${prefix}-class-content`, + `${prefix}-class-image`, + `${prefix}-class-text`, + `${prefix}-class-description`, + ]; options = { multipleSlots: true, @@ -32,6 +38,7 @@ export default class GridItem extends SuperComponent { properties = props; data = { + prefix, classPrefix: name, gridItemStyle: '', gridItemWrapperStyle: '', diff --git a/src/grid/grid-item.wxml b/src/grid/grid-item.wxml index 9eac1c212..3a4db78f1 100644 --- a/src/grid/grid-item.wxml +++ b/src/grid/grid-item.wxml @@ -1,5 +1,5 @@ - - - + + + - {{text}} - - + {{text}} + + {{description}} - + diff --git a/src/grid/grid.less b/src/grid/grid.less index d51a944f5..e5378d327 100644 --- a/src/grid/grid.less +++ b/src/grid/grid.less @@ -1,9 +1,15 @@ @import '../common/style/index.less'; +@grid-bg-color: rgba(255, 255, 255, 1); + +page { + --t-grid-bg-color: @grid-bg-color; +} + .@{prefix}-grid { position: relative; overflow: hidden; - background: rgba(255, 255, 255, 1); + background-color: var(--t-grid-bg-color); &__content { width: auto; diff --git a/src/indexes/_example/display/data.js b/src/indexes/_example/display/data.js new file mode 100644 index 000000000..30e5e7933 --- /dev/null +++ b/src/indexes/_example/display/data.js @@ -0,0 +1,186 @@ +const letter = [ + { + title: 'A开头', + index: 'A', + children: [ + { title: '阿坝' }, + { title: '阿拉善' }, + { title: '阿里' }, + { title: '安康' }, + { title: '安庆' }, + { title: '鞍山' }, + { title: '安顺' }, + { title: '安阳' }, + { title: '澳门' }, + ], + }, + { + title: 'B开头', + index: 'B', + children: [ + { title: '北京' }, + { title: '白银' }, + { title: '保定' }, + { title: '宝鸡' }, + { title: '保山' }, + { title: '包头' }, + { title: '巴中' }, + { title: '北海' }, + { title: '蚌埠' }, + { title: '本溪' }, + { title: '毕节' }, + { title: '滨州' }, + { title: '百色' }, + { title: '亳州' }, + ], + }, + { + title: 'C开头', + index: 'C', + children: [ + { title: '重庆' }, + { title: '成都' }, + { title: '长沙' }, + { title: '长春' }, + { title: '沧州' }, + { title: '常德' }, + { title: '昌都' }, + { title: '长治' }, + { title: '常州' }, + { title: '巢湖' }, + { title: '潮州' }, + { title: '承德' }, + { title: '郴州' }, + { title: '赤峰' }, + { title: '池州' }, + { title: '崇左' }, + { title: '楚雄' }, + { title: '滁州' }, + { title: '朝阳' }, + ], + }, + { + title: 'D开头', + index: 'D', + children: [ + { title: '大连' }, + { title: '东莞' }, + { title: '大理' }, + { title: '丹东' }, + { title: '大庆' }, + { title: '大同' }, + { title: '大兴安岭' }, + { title: '德宏' }, + { title: '德阳' }, + { title: '德州' }, + { title: '定西' }, + { title: '迪庆' }, + { title: '东营' }, + ], + }, + { + title: 'E开头', + index: 'E', + children: [{ title: '鄂尔多斯' }, { title: '恩施' }, { title: '鄂州' }], + }, + { + title: 'F开头', + index: 'F', + children: [ + { title: '福州' }, + { title: '防城港' }, + { title: '佛山' }, + { title: '抚顺' }, + { title: '抚州' }, + { title: '阜新' }, + { title: '阜阳' }, + ], + }, + { + title: 'G开头', + index: 'G', + children: [ + { title: '广州' }, + { title: '桂林' }, + { title: '贵阳' }, + { title: '甘南' }, + { title: '赣州' }, + { title: '甘孜' }, + { title: '广安' }, + { title: '广元' }, + { title: '贵港' }, + { title: '果洛' }, + ], + }, +]; + +const number = [ + { + title: '第一章', + index: '1', + children: [ + { title: '第一章第一节' }, + { title: '第一章第二节' }, + { title: '第一章第三节' }, + { title: '第一章第四节' }, + { title: '第一章第五节' }, + ], + }, + { + title: '第二章', + index: '2', + children: [ + { title: '第二章第一节' }, + { title: '第二章第二节' }, + { title: '第二章第三节' }, + { title: '第二章第四节' }, + { title: '第二章第五节' }, + ], + }, + { + title: '第三章', + index: '3', + children: [ + { title: '第三章第一节' }, + { title: '第三章第二节' }, + { title: '第三章第三节' }, + { title: '第三章第四节' }, + { title: '第三章第五节' }, + ], + }, + { + title: '第四章', + index: '4', + children: [ + { title: '第四章第一节' }, + { title: '第四章第二节' }, + { title: '第四章第三节' }, + { title: '第四章第四节' }, + { title: '第四章第五节' }, + ], + }, + { + title: '第五章', + index: '5', + children: [ + { title: '第五章第一节' }, + { title: '第五章第二节' }, + { title: '第五章第三节' }, + { title: '第五章第四节' }, + { title: '第五章第五节' }, + ], + }, + { + title: '第六章', + index: '6', + children: [ + { title: '第六章第一节' }, + { title: '第六章第二节' }, + { title: '第六章第三节' }, + { title: '第六章第四节' }, + { title: '第六章第五节' }, + ], + }, +]; + +export { letter, number };