A cell to display list, link or form
- Generally cell consists of main information、operations.
- The main information are placed on the left side of cell, While the operations are placed on the right side.
- You can override the
label
、title
、value
byslot
.
<template>
<div class="container">
<div class="demo">
<text class="demo-title">List demo</text>
<wxc-cell label="Label demo text"
title="Title demo text"
:has-arrow="true"
@wxcCellClicked="wxcCellClicked"
:has-margin="true"></wxc-cell>
<wxc-cell label="Label demo text"
title="Title demo text"
:has-arrow="true"
link="https://h5.m.taobao.com/trip/home/index.html"
@wxcCellClicked="wxcCellClicked"
spm="181.12312312.12312.d01"
:has-top-border="false"></wxc-cell>
<wxc-cell label="Label demo text"
title="Title demo text"
:has-arrow="true"
@wxcCellClicked="wxcCellClicked"
:has-top-border="false"></wxc-cell>
</div>
<div class="demo">
<text class="demo-title">No label</text>
<wxc-cell title="Title demo text"
:has-arrow="true"
@wxcCellClicked="wxcCellClicked"
:has-top-border="true"></wxc-cell>
</div>
<div class="demo">
<text class="demo-title">Add desc</text>
<wxc-cell title="Title text"
desc="Desc text"
:has-arrow="true"
@wxcCellClicked="wxcCellClicked"
:has-top-border="true"></wxc-cell>
</div>
<div class="demo">
<text class="demo-title">No arrow</text>
<wxc-cell title="Title text"
:has-arrow="false"
@wxcCellClicked="wxcCellClicked"
:has-top-border="true"></wxc-cell>
</div>
<div class="demo">
<text class="demo-title">Custom slot</text>
<wxc-cell title="Title text"
:has-arrow="false"
:has-top-border="true">
<switch slot="value"></switch>
</wxc-cell>
</div>
</div>
</template>
<script>
import { WxcCell } from 'weex-ui';
export default {
components: { WxcCell },
methods: {
wxcCellClicked (e) {
console.log(e)
}
}
};
</script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
label | String |
N |
- |
describing the title |
title | String |
N |
- |
main information |
desc | String |
N |
- |
description information |
link | String |
N |
- |
jump link |
arrow-icon | String |
N |
arrow |
override right arrow |
has-arrow | Bool |
N |
false |
whether to show arrow |
has-top-border | Bool |
N |
false |
whether to show top border |
has-bottom-border | Bool |
N |
true |
whether to show bottom border |
has-vertical-indent | Bool |
N |
true |
whether has vertical indent |
has-margin | Bool |
N |
false |
whether has vertical margin |
cell-style | Object |
N |
{} |
Custom cell style |
<slot name="label"></slot>
:label slot<slot name="title"></slot>
:title slot<slot name="value"></slot>
:right slot
//`@wxcCellClicked="wxcCellClicked"`