A cell to display list, link or form
label
、title
、value
by slot
.
<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 |
extraContent | String | N | {} | Extra content |
<slot name="label"></slot>
:label slot<slot name="title"></slot>
:title slot<slot name="value"></slot>
:right slot//`@wxcCellClicked="wxcCellClicked"`