mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] SwipeCell: update demo
This commit is contained in:
陈嘉涵
parent
764cad3393
commit
3059f5dcc4
@ -4,34 +4,52 @@
|
||||
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-swipe-cell
|
||||
:right-width="65"
|
||||
:left-width="65"
|
||||
:right-width="60"
|
||||
:left-width="60"
|
||||
>
|
||||
<span slot="left">{{ $t('button1') }}</span>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
:title="$t('title')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
:text="$t('button1')"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
:title="$t('title')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-swipe-cell
|
||||
:right-width="65"
|
||||
:left-width="65"
|
||||
:right-width="60"
|
||||
:left-width="60"
|
||||
:on-close="onClose"
|
||||
>
|
||||
<span slot="left">{{ $t('button1') }}</span>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
:title="$t('title')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
:text="$t('button1')"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
:title="$t('title')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@ -85,19 +103,5 @@ export default {
|
||||
|
||||
.demo-swipe-cell {
|
||||
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>
|
||||
|
||||
@ -14,11 +14,23 @@ Vue.use(SwipeCell);
|
||||
|
||||
```html
|
||||
<van-swipe-cell :right-width="65" :left-width="65">
|
||||
<span slot="left">Select</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell" value="Cell Content" />
|
||||
</van-cell-group>
|
||||
<span slot="right">Delete</span>
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="Select"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="Cell"
|
||||
value="Cell Content"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="Delete"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
@ -26,11 +38,23 @@ Vue.use(SwipeCell);
|
||||
|
||||
```html
|
||||
<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
|
||||
<span slot="left">Select</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell" value="Cell Content" />
|
||||
</van-cell-group>
|
||||
<span slot="right">Delete</span>
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="Select"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="Cell"
|
||||
value="Cell Content"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="Delete"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
|
||||
@ -11,28 +11,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<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__left"><span>选择</span></div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</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 van-cell--borderless">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></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 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__left"><span>选择</span></div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</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 van-cell--borderless">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></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>
|
||||
|
||||
@ -13,24 +13,48 @@ Vue.use(SwipeCell);
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-swipe-cell :right-width="65" :left-width="65">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
<van-swipe-cell :right-width="60" :left-width="60">
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="选择"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="单元格"
|
||||
value="内容"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="删除"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
### 异步关闭
|
||||
|
||||
```html
|
||||
<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
<van-swipe-cell :right-width="60" :left-width="60" :on-close="onClose">
|
||||
<van-button
|
||||
square
|
||||
slot="left"
|
||||
type="danger"
|
||||
text="选择"
|
||||
/>
|
||||
<van-cell
|
||||
:border="false"
|
||||
title="单元格"
|
||||
value="内容"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
slot="right"
|
||||
type="danger"
|
||||
text="删除"
|
||||
/>
|
||||
</van-swipe-cell>
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user