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

[new feature] Cell: add new prop useLabelSlot & add new slot label #1510

Merged
merged 1 commit into from
Apr 15, 2019
Merged

[new feature] Cell: add new prop useLabelSlot & add new slot label #1510

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
13 changes: 10 additions & 3 deletions example/pages/cell/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,19 @@
<van-cell
title="单元格"
value="内容"
label="描述信息"
size="large"
use-label-slot
border="{{ false }}"
/>
>
<view slot="label">描述信息</view>
</van-cell>
</van-cell-group>
</demo-block>

<demo-block title="展示图标">
<van-cell
title="单元格"
value="内容"
icon="location-o"
border="{{ false }}"
/>
Expand All @@ -48,10 +51,14 @@
arrow-direction="down"
value="内容"
border="{{ false }}"
url="/pages/dashboard/index"
/>
</demo-block>

<demo-block title="页面跳转">
<van-cell title="单元格" is-link url="/pages/dashboard/index" />
<van-cell title="单元格" is-link url="/pages/dashboard/index" link-type="redirectTo" />
</demo-block>

<demo-block title="分组标题">
<van-cell-group title="分组 1">
<van-cell title="单元格" value="内容" />
Expand Down
85 changes: 21 additions & 64 deletions packages/cell/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,8 @@ es5

```html
<van-cell-group>
<van-cell
title="单元格"
value="内容"
/>
<van-cell
title="单元格"
value="内容"
label="描述信息"
border="{{ false }}"
/>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />
</van-cell-group>
```

Expand All @@ -46,51 +38,34 @@ es5
通过`size`属性可以控制单元格的大小

```html
<van-cell
title="单元格"
value="内容"
size="large"
/>
<van-cell
title="单元格"
value="内容"
size="large"
label="描述信息"
/>
<van-cell title="单元格" value="内容" size="large" />
<van-cell title="单元格" value="内容" size="large" label="描述信息" />
```

#### 展示图标

通过`icon`属性在标题左侧展示图标

```html
<van-cell
title="单元格"
icon="location-o"
/>
<van-cell title="单元格" icon="location-o" />
```

#### 展示箭头

传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向

```html
<van-cell
title="单元格"
is-link
/>
<van-cell
title="单元格"
value="内容"
is-link
/>
<van-cell
title="单元格"
value="内容"
is-link
arrow-direction="down"
url="/pages/dashboard/index"
/>
<van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" />
<van-cell title="单元格" is-link value="内容" arrow-direction="down" />
```

#### 页面跳转

可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型

```html
<van-cell title="单元格" is-link url="/pages/dashboard/index" link-type="navigateTo" />
```

#### 分组标题
Expand All @@ -111,27 +86,15 @@ es5
如以上用法不能满足你的需求，可以使用对应的插槽来自定义显示的内容

```html
<van-cell
value="内容"
icon="shop-o"
is-link
>
<van-cell value="内容" icon="shop-o" is-link>
<view slot="title">
<view class="van-cell-text">单元格</view>
<van-tag type="danger">标签</van-tag>
</view>
</van-cell>
<van-cell
title="单元格"
icon="location-o"
is-link
/>
<van-cell title="单元格" icon="location-o" is-link />
<van-cell title="单元格">
<van-icon
slot="right-icon"
name="search"
class="van-cell__right-icon"
/>
<van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>
```

Expand Down Expand Up @@ -166,6 +129,7 @@ es5
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
| required | 是否显示表单必填星号 | `Boolean` | `false` |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - |
| use-label-slot | 是否使用 label slot | `Boolean` | `false` |

### Cell Event

Expand All @@ -179,6 +143,7 @@ es5
|-----------|-----------|
| - | 自定义`value`显示内容，如果设置了`value`属性则不生效 |
| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |
| label | 自定义`label`显示内容，需要设置 `use-label-slot`属性 |
| icon | 自定义`icon`显示内容，如果设置了`icon`属性则不生效 |
| right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 |

Expand All @@ -190,11 +155,3 @@ es5
| title-class | 标题样式类 |
| label-class | 描述信息样式类 |
| value-class | 右侧内容样式类 |

### 更新日志

| 版本 | 类型 | 内容 |
|-----------|-----------|-----------|
| 0.0.1 | feature | 新增组件 |
| 0.3.3 | bugfix | 修复 value 为空时 title 最大宽度错误的问题 |
| 0.3.4 | bugfix | 修复使用 title 插槽时长度错误的问题 |
1 change: 1 addition & 0 deletions packages/cell/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ VantComponent({
titleWidth: String,
customStyle: String,
arrowDirection: String,
useLabelSlot: Boolean,
border: {
type: Boolean,
value: true
Expand Down
10 changes: 6 additions & 4 deletions packages/cell/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@
style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
class="van-cell__title title-class"
>
<block wx:if="{{ title }}">
{{ title }}
<view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view>
</block>
<block wx:if="{{ title }}">{{ title }}</block>
<slot wx:else name="title" />

<view wx:if="{{ label || useLabelSlot }}" class="van-cell__label label-class">
<slot wx:if="{{ useLabelSlot }}" name="label" />
<block wx:elif="{{ label }}">{{ label }}</block>
</view>
</view>

<view class="van-cell__value value-class">
Expand Down