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(cell): replace the demo code of cell #675

Merged
merged 1 commit into from
Jul 29, 2022
Merged

docs(cell): replace the demo code of cell #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 2 additions & 53 deletions src/cell/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,64 +21,13 @@ isComponent: true

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

```html
<!-- 单行 默认 -->
<t-cell title="单行标题" hover />

<!-- 单行 必须 -->
<t-cell title="单行标题" required />

<!-- 单行 辅助信息 -->
<t-cell title="单行标题" hover note="辅助信息" />

<!-- 单行 箭头 -->
<t-cell title="单行标题" hover arrow />

<!-- 单行 自定义辅助信息-slot -->
<t-cell title="单行标题" hover arrow>
<t-badge count="{{16}}" slot="note" />
</t-cell>

<!-- 单行 左侧icon-slot -->
<t-cell title="单行标题" hover>
<t-icon name="app" slot="left-icon" />
</t-cell>
```
{{ base }}

### 多行单元格

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

```html
<!-- 多行 -->
<t-cell title="多行标题" description="一段很长很长的内容文字" />

<!-- 多行 带图标 -->
<t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
<t-icon class="icon-center title-icon" name="app" slot="left-icon" />
</t-cell>

<!-- 多行 带头像 -->
<t-cell
title="多行带头像"
arrow
description="一段很长很长很长的内容文字"
t-class-image="title-image"
>
<view class="avatar" slot="left-icon">
<open-data type="userAvatarUrl" />
</view>
</t-cell>

<!-- 多行 带图片 -->
<t-cell
title="多行带图片"
description="一段很长很长的内容文字"
align="top"
t-class-image="title-image-large"
image="xxx.svg"
/>
```
{{ multiple }}

## API
### Cell Props
Expand Down
3 changes: 3 additions & 0 deletions src/cell/_example/base/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Page({
data: {},
});
8 changes: 8 additions & 0 deletions src/cell/_example/base/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"t-switch": "tdesign-miniprogram/switch/switch",
"t-cell": "tdesign-miniprogram/cell/cell",
"t-badge": "tdesign-miniprogram/badge/badge"
}
}
16 changes: 16 additions & 0 deletions src/cell/_example/base/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<view class="demo-section__wrapper">
<t-cell title="单行标题" hover />
<t-cell title="单行标题" required />
<t-cell title="单行标题" hover note="辅助信息" />
<t-cell title="单行标题" hover arrow />
<t-cell title="单行标题" hover note="辅助信息" arrow />
<t-cell title="单行标题" hover arrow>
<t-badge count="{{16}}" slot="note" />
</t-cell>
<t-cell title="单行标题">
<t-switch defaultValue="{{false}}" slot="note" />
</t-cell>
<t-cell title="单行标题" hover>
<t-icon name="app" slot="left-icon" />
</t-cell>
</view>
3 changes: 3 additions & 0 deletions src/cell/_example/base/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.demo-section__wrapper {
margin: 32rpx 0;
}
4 changes: 3 additions & 1 deletion src/cell/_example/cell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"navigationBarTitleText": "cell 单元格",
"usingComponents": {
"t-demo": "../../components/demo-block/index"
"t-demo": "../../components/demo-block/index",
"base": "./base",
"multiple": "./multiple"
}
}
41 changes: 2 additions & 39 deletions src/cell/_example/cell.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,9 @@
<view class="demo-desc">用于各个类别行的信息展示。</view>
<t-demo title="01 类型">
<view class="demo-section__desc">单行</view>
<view class="demo-section__wrapper">
<t-cell title="单行标题" hover />
<t-cell title="单行标题" required />
<t-cell title="单行标题" hover note="辅助信息" />
<t-cell title="单行标题" hover arrow />
<t-cell title="单行标题" hover note="辅助信息" arrow />
<t-cell title="单行标题" hover arrow>
<t-badge count="{{16}}" slot="note" />
</t-cell>
<t-cell title="单行标题">
<t-switch defaultValue="{{false}}" slot="note" />
</t-cell>
<t-cell title="单行标题" hover>
<t-icon name="app" slot="left-icon" />
</t-cell>
</view>
<base />

<view class="demo-section__desc">多行</view>
<view class="demo-section__wrapper">
<t-cell title="多行标题" description="一段很长很长的内容文字" />
<t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
<t-icon name="app" slot="left-icon" />
</t-cell>
<t-cell title="多行带头像" arrow description="一段很长很长很长的内容文字">
<view class="avatar" slot="left-icon">
<open-data type="userAvatarUrl" />
</view>
</t-cell>
<t-cell
title="多行带图片"
description="一段很长很长的内容文字"
align="top"
image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
/>
<t-cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
<t-cell
title="多行标题，高度不定，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
bordered="{{false}}"
/>
</view>
<multiple />
</t-demo>
</view>
3 changes: 3 additions & 0 deletions src/cell/_example/multiple/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Page({
data: {},
});
7 changes: 7 additions & 0 deletions src/cell/_example/multiple/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-icon": "tdesign-miniprogram/icon/icon",
"t-cell": "tdesign-miniprogram/cell/cell"
}
}
18 changes: 18 additions & 0 deletions src/cell/_example/multiple/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<view class="demo-section__wrapper">
<t-cell title="多行标题" description="一段很长很长的内容文字" />
<t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
<t-icon name="app" slot="left-icon" />
</t-cell>
<t-cell title="多行带头像" arrow description="一段很长很长很长的内容文字">
<view class="avatar" slot="left-icon">
<open-data type="userAvatarUrl" />
</view>
</t-cell>
<t-cell title="多行带图片" description="一段很长很长的内容文字" align="top" image="xxx.svg" />
<t-cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
<t-cell
title="多行标题，高度不定，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
bordered="{{false}}"
/>
</view>
14 changes: 14 additions & 0 deletions src/cell/_example/multiple/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.demo-section__wrapper {
margin: 32rpx 0;
}

.t-class-left {
align-self: flex-start;
}

.avatar {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
overflow: hidden;
}