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

[Doc] SwipeCell: update demo

Browse Source
This commit is contained in:
陈嘉涵 2019-05-29 14:59:51 +08:00
parent 764cad3393
commit 3059f5dcc4
4 changed files with 118 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/swipe-cell/demo/index.vue
View File

@ -4,34 +4,52 @@
<van-notice-bar>{{ $t('tips') }}</van-notice-bar> <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-swipe-cell <van-swipe-cell
:right-width="65" :right-width="60"
:left-width="65" :left-width="60"
> >
<span slot="left">{{ $t('button1') }}</span> <van-button
<van-cell-group> square
<van-cell slot="left"
:title="$t('title')" type="danger"
:value="$t('content')" :text="$t('button1')"
/> />
</van-cell-group> <van-cell
<span slot="right">{{ $t('button2') }}</span> :border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-button
square
slot="right"
type="danger"
:text="$t('button2')"
/>
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-swipe-cell <van-swipe-cell
:right-width="65" :right-width="60"
:left-width="65" :left-width="60"
:on-close="onClose" :on-close="onClose"
> >
<span slot="left">{{ $t('button1') }}</span> <van-button
<van-cell-group> square
<van-cell slot="left"
:title="$t('title')" type="danger"
:value="$t('content')" :text="$t('button1')"
/> />
</van-cell-group> <van-cell
<span slot="right">{{ $t('button2') }}</span> :border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-button
square
slot="right"
type="danger"
:text="$t('button2')"
/>
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -85,19 +103,5 @@ export default {
.demo-swipe-cell { .demo-swipe-cell {
user-select: none; user-select: none;
.van-swipe-cell {
&__left,
&__right {
display: inline-block;
width: 65px;
height: 44px;
color: @white;
font-size: 15px;
line-height: 44px;
text-align: center;
background-color: @red;
}
}
} }
</style> </style>

44
packages/swipe-cell/en-US.md
View File

@ -14,11 +14,23 @@ Vue.use(SwipeCell);
```html ```html
<van-swipe-cell :right-width="65" :left-width="65"> <van-swipe-cell :right-width="65" :left-width="65">
<span slot="left">Select</span> <van-button
<van-cell-group> square
<van-cell title="Cell" value="Cell Content" /> slot="left"
</van-cell-group> type="danger"
<span slot="right">Delete</span> text="Select"
/>
<van-cell
:border="false"
title="Cell"
value="Cell Content"
/>
<van-button
square
slot="right"
type="danger"
text="Delete"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```
@ -26,11 +38,23 @@ Vue.use(SwipeCell);
```html ```html
<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose"> <van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
<span slot="left">Select</span> <van-button
<van-cell-group> square
<van-cell title="Cell" value="Cell Content" /> slot="left"
</van-cell-group> type="danger"
<span slot="right">Delete</span> text="Select"
/>
<van-cell
:border="false"
title="Cell"
value="Cell Content"
/>
<van-button
square
slot="right"
type="danger"
text="Delete"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```

24
packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -11,28 +11,24 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-swipe-cell"> <div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);"> <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"><span>选择</span></div> <div class="van-swipe-cell__left"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell van-cell--borderless">
<div class="van-cell"> <div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__title"><span>单元格</span></div> <div class="van-cell__value"><span>内容</span></div>
<div class="van-cell__value"><span>内容</span></div>
</div>
</div> </div>
<div class="van-swipe-cell__right"><span>删除</span></div> <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-swipe-cell"> <div class="van-swipe-cell">
<div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);"> <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
<div class="van-swipe-cell__left"><span>选择</span></div> <div class="van-swipe-cell__left"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell van-cell--borderless">
<div class="van-cell"> <div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__title"><span>单元格</span></div> <div class="van-cell__value"><span>内容</span></div>
<div class="van-cell__value"><span>内容</span></div>
</div>
</div> </div>
<div class="van-swipe-cell__right"><span>删除</span></div> <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">删除</span></button></div>
</div> </div>
</div> </div>
</div> </div>

48
packages/swipe-cell/zh-CN.md
View File

@ -13,24 +13,48 @@ Vue.use(SwipeCell);
### 基础用法 ### 基础用法
```html ```html
<van-swipe-cell :right-width="65" :left-width="65"> <van-swipe-cell :right-width="60" :left-width="60">
<span slot="left">选择</span> <van-button
<van-cell-group> square
<van-cell title="单元格" value="内容" /> slot="left"
</van-cell-group> type="danger"
<span slot="right">删除</span> text="选择"
/>
<van-cell
:border="false"
title="单元格"
value="内容"
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```
### 异步关闭 ### 异步关闭
```html ```html
<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose"> <van-swipe-cell :right-width="60" :left-width="60" :on-close="onClose">
<span slot="left">选择</span> <van-button
<van-cell-group> square
<van-cell title="单元格" value="内容" /> slot="left"
</van-cell-group> type="danger"
<span slot="right">删除</span> text="选择"
/>
<van-cell
:border="false"
title="单元格"
value="内容"
/>
<van-button
square
slot="right"
type="danger"
text="删除"
/>
</van-swipe-cell> </van-swipe-cell>
``` ```