<template>
  <div class="page-cell">
    <!-- <div class="page-title">Cell</div> -->
    <co-header fixed title="Cell">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell title="标题文字" class="page-content-main"></co-cell>
      <co-cell title="标题文字" value="说明文字"></co-cell>
      
      <co-cell title="标题" label="描述信息"></co-cell>
      
      <co-cell title="标题文字" is-link value="带链接"></co-cell>    
      <co-cell title="原生跳转" label="跳转到 https://mint-ui.github.io" is-link to="https://mint-ui.github.io"></co-cell>
      <co-cell title="路由跳转" label="跳转到 /#/toast" is-link :to="{ name: '指示框' }"></co-cell>

      <co-cell title="标题文字" icon="more" value="带coicon"></co-cell>
      <co-cell title="标题文字">
        <span>自定义图片作为 icon</span>
        <img slot="icon" src="../assets/100x100.png" width="24" height="24">
      </co-cell>

      <co-cell title="标题文字" value='将被 co-cell 元素内默认 slot 覆盖' is-link>
        <span style="color: green">自定义元素替换 value</span>
      </co-cell>
      <co-cell title="被 slot=title 标签覆盖" value='自定义元素替换 title'>
        <co-button size="small" type="primary" slot='title'>这里是按钮</co-button>
      </co-cell>
    </div>
  </div>
</template>
