<template>
  <div class="demo-cell">
    <zui-cell title="选项一" value="内容一"></zui-cell>
    <zui-cell title="选项二" value="内容二" short size="large"></zui-cell>
    <zui-cell title="选项三" value="内容三" long></zui-cell>
    <zui-cell title="选项四" value="内容四" label="副标题" is-link center></zui-cell>
    <zui-cell title="选项五" value="内容五" is-link :clickable="false"></zui-cell>
    <zui-cell title="选项六" value="内容六" label="描述" :border="false"></zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
  padding: 20px;
  background: #f5f5f5;
}
</style>

<template>
  <div class="demo-cell">
    <zui-cell title="显示图标" value="内容一" icon="message"></zui-cell>
    <zui-cell title="图标颜色" value="内容二" :icon="{ name: 'message', color: '#28AA91' }"></zui-cell>
    <zui-cell title="自定义图标" value="内容三">
      <zui-icon slot="icon" name="attachmoney" size="1.2" color="deepskyblue" />
    </zui-cell>
    <zui-cell title="SVG图标" value="内容四" :icon="{ name: 'sousuo', svg: true }"></zui-cell>
    <zui-cell title="图片图标" value="内容五" :icon="{ src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/mark-icon-1@1x-c1226bc3ad.png' }"></zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
  padding: 20px;
  background: #f5f5f5;
}
</style>

<template>
  <div class="demo-cell">
    <zui-cell title="默认点击" value="内容" is-link></zui-cell>
    <zui-cell title="右侧图标" value="内容" right-icon="search"></zui-cell>
    <zui-cell title="自定义右侧内容" value="内容" is-link>
      <div slot="right">Right</div>
    </zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
  padding: 20px;
  background: #f5f5f5;
}
</style>

<template>
  <div class="demo-cell">
    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
    <zui-cell is-link>
      <zui-icon slot="icon" name="error" size="2" color="deeppink" />
      <div slot="title">
        <div class="zui-cell__title">开启微信通知</div>
        <div class="zui-cell__label" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
          关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息
        </div>
      </div>
      <div style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between; white-space: nowrap; word-break: break-all;">
        <div style="font-size: 12px; color: grey;">2020-03-18</div>
        <div><zui-tag size="tiny" shape="dot" type="fill"></zui-tag></div>
      </div>
    </zui-cell>
  </div>
</template>

<style>
.demo-cell {
  width: 400px;
  padding: 20px;
  background: #f5f5f5;
}
</style>