blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] Cell: update demo (#3649)

Browse Source
This commit is contained in:
neverland 2019-06-26 17:46:50 +08:00 committed by GitHub
parent 8d5a2fc438
commit 0081f72556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/cell/demo/index.vue
View File

@ -89,19 +89,21 @@
<demo-block :title="$t('advancedUsage')">
<van-cell
:value="$t('content')"
icon="shop-o"
is-link
>
<template #title>
<span class="custom-text">{{ $t('cell') }}</span>
<span class="custom-title">{{ $t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
</template>
</van-cell>
<van-cell :title="$t('cell')">
<van-cell
icon="shop-o"
:title="$t('cell')"
>
<template #right-icon>
<van-icon
name="search"
class="custom-icon"
style="line-height: inherit;"
/>
</template>
</van-cell>
@ -138,13 +140,9 @@ export default {
<style lang="less">
.demo-cell {
.custom-text {
.custom-title {
margin-right: 5px;
vertical-align: middle;
}
.custom-icon {
line-height: 24px;
}
}
</style>

25
packages/cell/en-US.md
View File

@ -76,17 +76,20 @@ Vue.use(Cell).use(CellGroup);
### Advanced Usage
```html
<van-cell-group>
<van-cell value="Content" icon="shop-o" is-link>
<template slot="title">
<span class="custom-text">Cell title</span>
<van-tag type="danger">Tag</van-tag>
</template>
</van-cell>
<van-cell title="Cell title">
<van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>
</van-cell-group>
<van-cell value="Content" is-link>
<template slot="title">
<span class="custom-title">Cell title</span>
<van-tag type="danger">Tag</van-tag>
</template>
</van-cell>
<van-cell title="Cell title" icon="shop-o">
<van-icon
slot="right-icon"
name="search"
style="line-height: inherit;"
/>
</van-cell>
```
## API

10
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -87,14 +87,14 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop-o van-cell__left-icon">
<!----></i>
<div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span></div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span></div>
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell">
<div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
<div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
<!----></i>
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="line-height: inherit;">
<!----></i>
</div>
</div>

13
packages/cell/zh-CN.md
View File

@ -82,14 +82,19 @@ Vue.use(Cell).use(CellGroup);
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
```html
<van-cell value="内容" icon="shop-o" is-link>
<van-cell value="内容" is-link>
<template slot="title">
<span class="custom-text">单元格</span>
<span class="custom-title">单元格</span>
<van-tag type="danger">标签</van-tag>
</template>
</van-cell>
<van-cell title="单元格">
<van-icon slot="right-icon" name="search" class="custom-icon" />
<van-cell title="单元格" icon="shop-o">
<van-icon
slot="right-icon"
name="search"
style="line-height: inherit;"
/>
</van-cell>
```