# Cell 单元格

常用单元格

## 基础用法

基础单元格包括**标题**, **内容**, **描述**

::: snippet 配置`title`属性显示标题, 配置`value`属性显示内容, 配置`label`属性显示描述

```html
<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>
```

:::

## 显示图标

单元格支持显示左侧图标

::: snippet 支持配置`icon`属性显示图标，也可通过`icon`插槽配置自定义内容

```html
<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>
```

:::

## 点击效果

支持配置`is-link`属性显示点击效果，配置`right-icon`属性改变右侧图标，配置`right`插槽自定义右侧内容

::: snippet 配置`right-icon`属性改变右侧图标

```html
<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>
```

:::

## 综合示例

一个常用的单元格示例

::: snippet 综合示例

```html
<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>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
icon | 图标 | String | - | -
title | 标题 | String | - | -
value | 内容 | String | - | -
label | 标签 | String | - | -
isLink | 是否显示点击效果 | Boolean | - | -
rightIcon | 右侧图标 | String | - | enter

## Events 事件

事件名称|说明|回调参数
-|-|-
click | 按钮点击事件 | -