mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update cell (#4293)
This commit is contained in:
neverland
GitHub
parent
dc8b166e9b
commit
8df92071f5
@ -4,6 +4,7 @@
|
||||
v-show="title"
|
||||
class="van-doc-nav-bar"
|
||||
:title="title"
|
||||
:border="false"
|
||||
:left-arrow="showNav"
|
||||
@click-left="onBack"
|
||||
/>
|
||||
|
||||
@ -75,7 +75,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
### Use Slots
|
||||
|
||||
```html
|
||||
<van-cell value="Content" is-link>
|
||||
@ -143,7 +143,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Default slot |
|
||||
| default | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
|
||||
@ -41,7 +41,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
|
||||
### 只设置 value
|
||||
|
||||
只设置`value`时会向左对齐
|
||||
只设置`value`时，内容会靠左对齐
|
||||
|
||||
```html
|
||||
<van-cell value="内容" />
|
||||
@ -49,7 +49,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
|
||||
### 展示箭头
|
||||
|
||||
传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
|
||||
设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" is-link />
|
||||
@ -79,12 +79,13 @@ Vue.use(Cell).use(CellGroup);
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
### 使用插槽
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容
|
||||
|
||||
```html
|
||||
<van-cell value="内容" is-link>
|
||||
<!-- 使用 title 插槽来自定义标题 -->
|
||||
<template slot="title">
|
||||
<span class="custom-title">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
@ -92,6 +93,7 @@ Vue.use(Cell).use(CellGroup);
|
||||
</van-cell>
|
||||
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
||||
<van-icon
|
||||
slot="right-icon"
|
||||
name="search"
|
||||
@ -138,19 +140,19 @@ Vue.use(Cell).use(CellGroup);
|
||||
|------|------|------|
|
||||
| click | 点击单元格时触发 | event: Event |
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义`value`显示内容 |
|
||||
| title | 自定义标题显示内容 |
|
||||
| label | 自定义标题下方描述显示内容 |
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
|
||||
### CellGroup Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 默认插槽 |
|
||||
| title | 自定义分组标题 |
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义右侧内容 |
|
||||
| title | 自定义左侧标题 |
|
||||
| label | 自定义标题下方描述 |
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
|
||||
@ -2,38 +2,18 @@
|
||||
<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 :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('largeSize')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
size="large"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
size="large"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
<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('showIcon')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
icon="location-o"
|
||||
/>
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" icon="location-o" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('valueOnly')">
|
||||
@ -41,70 +21,36 @@
|
||||
</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')"
|
||||
/>
|
||||
<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('urlRoute')"
|
||||
is-link
|
||||
url="/vant/mobile.html"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('vueRoute')"
|
||||
is-link
|
||||
to="index"
|
||||
/>
|
||||
<van-cell :title="$t('urlRoute')" is-link url="/vant/mobile.html" />
|
||||
<van-cell :title="$t('vueRoute')" is-link to="index" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('groupTitle')">
|
||||
<van-cell-group :title="`${$t('group')} 1`">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
<van-cell-group :title="`${$t('group')} 2`">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-cell
|
||||
:value="$t('content')"
|
||||
is-link
|
||||
>
|
||||
<demo-block :title="$t('useSlots')">
|
||||
<van-cell :value="$t('content')" is-link>
|
||||
<template #title>
|
||||
<span class="custom-title">{{ $t('cell') }}</span>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
icon="shop-o"
|
||||
:title="$t('cell')"
|
||||
>
|
||||
|
||||
<van-cell icon="shop-o" :title="$t('cell')">
|
||||
<template #right-icon>
|
||||
<van-icon
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
<van-icon name="search" style="line-height: inherit;" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
@ -124,7 +70,8 @@ export default {
|
||||
groupTitle: '分组标题',
|
||||
router: '页面导航',
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转'
|
||||
vueRoute: '路由跳转',
|
||||
useSlots: '使用插槽'
|
||||
},
|
||||
'en-US': {
|
||||
cell: 'Cell title',
|
||||
@ -136,7 +83,8 @@ export default {
|
||||
groupTitle: 'Group Title',
|
||||
router: 'Router',
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router'
|
||||
vueRoute: 'Vue Router',
|
||||
useSlots: 'Use Slots'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user