DetailItem 清单项

Scan me!

清单列表用于展示一些列表信息,如账单。

引入

  1. import { DetailItem } from 'mand-mobile'
  2. Vue.component(DetailItem.name, DetailItem)

代码演示

基本

DetailItem 清单项 - 图2

  1. <template>
  2. <div class="md-example-child md-example-child-detail-item md-example-child-detail-item-0">
  3. <md-field>
  4. <md-detail-item title="承保公司" content="众安" bold />
  5. <md-detail-item title="投保人" content="张三" />
  6. <md-detail-item title="被保人" content="李四" />
  7. <md-detail-item title="保险费用" content="0.1元/日" />
  8. <md-detail-item title="保障日期" content="2018/08/08 ~ 2019/08/08" />
  9. <md-detail-item title="保单号" content="123456789" />
  10. <md-detail-item title="保单协议">
  11. <a href="#" style="color:#5878B4;text-decoration:none;">查看</a>
  12. </md-detail-item>
  13. </md-field>
  14. </div>
  15. </template>
  16. <script>
  17. import {Field, DetailItem} from 'mand-mobile'
  18. export default {
  19. name: 'detail-item-demo',
  20. components: {
  21. [Field.name]: Field,
  22. [DetailItem.name]: DetailItem,
  23. },
  24. }
  25. </script>
  26.  

API

CellItem Props

属性说明类型默认值备注
title标题String--
content描述内容String--
bold是否加粗显示Booleanfalse-