# Cell 单元格

单元格

## 基础用法

单元格说明

::: snippet 示例

```html
<template>
  <div class="list">
    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
    <zui-cell title="可点击" value="内容" label="描述" is-link>
      <zui-icon slot="icon" name="attachmoney" size="2rem" color="deepskyblue" />
    </zui-cell>
    <zui-cell>
      <div slot="title">
        <div>开启微信通知</div>
        <div>关注微信公众号，可获取运单到账信息</div>
      </div>
      <div slot="right">
        icon
      </div>
    </zui-cell>
    <zui-cell is-link>
      <zui-icon slot="icon" name="error" size="2rem" color="deeppink" />
      <div slot="title">
        <div class="zui-cell__title">开启微信通知</div>
        <div class="zui-cell__label">关注微信公众号，可获取运单到账信息</div>
      </div>
      <div slot="right" style="text-align: right;">
        <div style="font-size: 12px; color: grey;">2020-03-18</div>
        <div><zui-tag size="tiny" shape="circle" type="fill" fill-color="red" font-color="#fff">2</zui-tag></div>
      </div>
    </zui-cell>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
}
</script>

<style>
.list {
  width: 400px;
}
</style>
```

:::