Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(Grid): update code sample #635

Merged
merged 3 commits into from
Jul 25, 2022
Merged

docs(Grid): update code sample #635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be605f4
style(grid): adjust style
anlyyao Jul 19, 2022
6e76302
docs(grid): update code sample
anlyyao Jul 19, 2022
d9d3c34
feat(grid): update components style
anlyyao Jul 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 35 additions & 105 deletions src/grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,114 +16,44 @@ isComponent: true
}
```

### 主题定制
CSS 变量名|说明
--|--
--td-grid-bg-color | 宫格背景颜色
--td-grid-item-text-color | 宫格文本颜色
--td-grid-item-description-color | 宫格描述信息文本颜色
--td-grid-item-hover-bg-color | 开启点击反馈时宫格背景颜色

## 代码演示

### 一行三个的宫格

<img src="https://tdesign.gtimg.com/miniprogram/readme/grid-2.png" width="375px" height="50%">

```html
<!-- 一行三个（border） -->
<t-grid border="{{true}}" class="three-border" 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>
<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>
<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>
</t-grid>
```
### 一行三个带边框

### 一行二个带说明的宫格

<img src="https://tdesign.gtimg.com/miniprogram/readme/grid-3.png" width="375px" height="50%">

```html
<!-- 一行二个带说明宫格 -->
<t-grid class="two-des" column="{{2}}" align="left">
<t-grid-item
text="标题文字"
class="t-grid-item"
t-class-text="text"
t-class-description="description"
description="说明文字"
layout="horizontal"
>
<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"
t-class-text="text"
t-class-description="description"
description="说明文字最多八字"
layout="horizontal"
>
<image
class="image-icon"
src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
slot="image"
/>
</t-grid-item>
</t-grid>
```
{{ border }}

### 一行四个

{{ four }}

### 一行五个

{{ five }}

### 一行三个

{{ three }}

### 一行二个带说明

{{ two-des }}

### 一行三个带说明

{{ three-des }}

### 带徽标

{{ badge }}

### 带徽标的宫格

<img src="https://tdesign.gtimg.com/miniprogram/readme/grid-1.png" width="375px" height="50%">

```html
<!-- 带徽标宫格 -->
<t-grid class="t-grid badge">
<t-grid-item text="标题文字" t-class-text="text">
<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-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-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-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">
<view class="badge-circle-container">
<view class="circle" />
<view class="circle" />
<view class="circle" />
</view>
</view>
</t-badge>
</t-grid-item>
</t-grid>
```

## API

Expand All @@ -143,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 |
Expand Down
1 change: 1 addition & 0 deletions src/grid/_example/badge/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
7 changes: 7 additions & 0 deletions src/grid/_example/badge/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-grid": "tdesign-miniprogram/grid/grid",
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
}
}
29 changes: 29 additions & 0 deletions src/grid/_example/badge/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<t-grid class="t-grid badge">
<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-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-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-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">
<view class="badge-circle-container">
<view class="circle" />
<view class="circle" />
<view class="circle" />
</view>
</view>
</t-badge>
</t-grid-item>
</t-grid>
43 changes: 43 additions & 0 deletions src/grid/_example/badge/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.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-circle {
display: flex;
justify-content: center;
background-color: #e34d59;
border-radius: 15rpx;
width: 36rpx;
height: 32rpx;
align-items: center;
position: absolute;
top: -15rpx;
left: 46rpx;
}

.circle {
width: 4rpx;
height: 4rpx;
border-radius: 2rpx;
background-color: white;
margin-left: 4rpx;
}

.badge-circle-container {
margin-left: -4rpx;
display: flex;
}
7 changes: 7 additions & 0 deletions src/grid/_example/border/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Component({
data: {
border: {
color: '#f6f6f6',
},
},
});
7 changes: 7 additions & 0 deletions src/grid/_example/border/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-grid": "tdesign-miniprogram/grid/grid",
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
}
}
5 changes: 5 additions & 0 deletions src/grid/_example/border/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<t-grid class="three-border" border="{{border}}" column="{{3}}">
<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>
Empty file added src/grid/_example/border/index.wxss
View file
Open in desktop
Empty file.
1 change: 1 addition & 0 deletions src/grid/_example/five/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
7 changes: 7 additions & 0 deletions src/grid/_example/five/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-grid": "tdesign-miniprogram/grid/grid",
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
}
}
37 changes: 37 additions & 0 deletions src/grid/_example/five/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<t-grid class="five" column="{{5}}">
<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" 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" 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" 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" 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="标题文字" 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" 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" 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" 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" 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>
35 changes: 35 additions & 0 deletions src/grid/_example/five/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* five */
.five .external-class-content {
padding: 32rpx 0 !important;
}

.image-icon {
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 {
height: 32rpx;
}

/* five-with-padding */
.five-with-padding {
margin: 0 48rrpx;
padding: 0 32rrpx;
border-radius: 16rpx;
}

.five-with-padding .external-class-content {
padding: 32rpx 0 20rpx 0 !important;
}
1 change: 1 addition & 0 deletions src/grid/_example/four/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Component({});
7 changes: 7 additions & 0 deletions src/grid/_example/four/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-grid": "tdesign-miniprogram/grid/grid",
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
}
}
19 changes: 19 additions & 0 deletions src/grid/_example/four/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<t-grid class="four">
<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" 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" 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"
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>
18 changes: 18 additions & 0 deletions src/grid/_example/four/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.external-class-content {
padding: 32rpx 0 !important;
}

.image-icon {
width: 64rpx !important;
height: 64rpx !important;
}

.image {
width: 100%;
height: 100%;
}

.text {
font-size: 24rpx !important;
line-height: 40rpx !important;
}
Loading