[new feature] Cell: add size prop (#2086)

This commit is contained in:
neverland
2018-11-14 17:25:14 +08:00
committed by GitHub
parent 469e8191df
commit 0860901ec1
8 changed files with 229 additions and 144 deletions
+43 -33
View File
@@ -7,39 +7,41 @@
</van-cell-group>
</demo-block>
<demo-block :title="$t('title2')">
<van-cell-group>
<van-cell :value="$t('content')" />
</van-cell-group>
<demo-block :title="$t('largeSize')">
<van-cell :title="$t('cell')" :value="$t('content')" size="large" />
<van-cell :title="$t('cell')" :value="$t('content')" size="large" :label="$t('desc')" />
</demo-block>
<demo-block :title="$t('title3')">
<van-cell-group>
<van-cell :title="$t('cell')" icon="location" />
</van-cell-group>
<demo-block :title="$t('showIcon')">
<van-cell :title="$t('cell')" :value="$t('content')" icon="location" />
</demo-block>
<demo-block :title="$t('title4')">
<van-cell-group>
<van-cell :title="$t('cell')" is-link />
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
<van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
</van-cell-group>
<demo-block :title="$t('valueOnly')">
<van-cell :value="$t('content')" />
</demo-block>
<demo-block :title="$t('showArrow')">
<van-cell :title="$t('cell')" is-link />
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
<van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
</demo-block>
<demo-block :title="$t('router')">
<van-cell :title="$t('cell')" is-link url="//youzan.github.io/vant/mobile.html" />
<van-cell :title="$t('cell')" is-link to="index" />
</demo-block>
<demo-block :title="$t('advancedUsage')">
<van-cell-group>
<van-cell :value="$t('content')" icon="shop" is-link>
<template slot="title">
<span class="van-cell-text">{{ $t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
</template>
</van-cell>
<van-cell :title="$t('cell')" icon="location" is-link />
<van-cell :title="$t('cell')">
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
</van-cell>
</van-cell-group>
<van-cell :value="$t('content')" icon="shop" is-link>
<template slot="title">
<span class="custom-text">{{ $t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
</template>
</van-cell>
<van-cell :title="$t('cell')" icon="location" is-link />
<van-cell :title="$t('cell')">
<van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>
</demo-block>
</demo-section>
</template>
@@ -49,15 +51,19 @@ export default {
i18n: {
'zh-CN': {
cell: '单元格',
title2: '只设置 value',
title3: '展示图标',
title4: '展示箭头'
valueOnly: '只设置 value',
showIcon: '展示图标',
showArrow: '展示箭头',
largeSize: '单元格大小',
router: '页面跳转'
},
'en-US': {
cell: 'Cell title',
title2: 'Value only',
title3: 'Left Icon',
title4: 'Link'
valueOnly: 'Value only',
showIcon: 'Left Icon',
showArrow: 'Link',
largeSize: 'Size',
router: 'Router'
}
}
};
@@ -65,9 +71,13 @@ export default {
<style lang="less">
.demo-cell {
.van-cell-text {
.custom-text {
margin-right: 5px;
vertical-align: middle;
}
.custom-icon {
line-height: 24px;
}
}
</style>