mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<demo-section>
|
|
<demo-block :title="$t('basicUsage')">
|
|
<van-cell-group>
|
|
<van-cell :title="$t('cell')" :value="$t('content')" />
|
|
<van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
|
|
</van-cell-group>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('title2')">
|
|
<van-cell-group>
|
|
<van-cell :value="$t('content')" />
|
|
</van-cell-group>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('title3')">
|
|
<van-cell-group>
|
|
<van-cell :title="$t('cell')" icon="location" />
|
|
</van-cell-group>
|
|
</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-group>
|
|
</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>
|
|
</demo-block>
|
|
</demo-section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
cell: '单元格',
|
|
title2: '只设置 value',
|
|
title3: '展示图标',
|
|
title4: '展示箭头'
|
|
},
|
|
'en-US': {
|
|
cell: 'Cell title',
|
|
title2: 'Value only',
|
|
title3: 'Left Icon',
|
|
title4: 'Link'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="postcss">
|
|
.demo-cell {
|
|
.van-cell-text {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.van-cell-text,
|
|
.van-tag--danger {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style>
|