# ui-cell 单元格组件

版本：v2.3.11

单元格组件用于在页面中展示列表项，支持多种配置和自定义内容，是构建列表页面的基础组件。

# 基本使用

# 基础单元格

<!-- 基础功能 -->
<ui-cell title="基础功能" rightIcon="icon-you" clickable @tap="onclick"></ui-cell>

<!-- 禁用状态 -->
<ui-cell title="基础功能" rightIcon="icon-you" disabled @tap="onclick"></ui-cell>

<!-- 带下边框 -->
<ui-cell title="带下边框" rightIcon="icon-you" border></ui-cell>

# 单元格内容配置

# 左侧内容

<!-- 左侧内容 -->
<ui-cell title="左侧内容" label="内容" rightIcon="icon-you"></ui-cell>

<!-- 左侧图标 -->
<ui-cell title="左侧图标" icon="icon-weibiaoti2010103" value="内容" rightIcon="icon-you" border></ui-cell>

<!-- 左侧图片 -->
<ui-cell title="左侧图片" image="https://cdn-q.oss-cn-shenzhen.aliyuncs.com/shadowUI/demo1.png" value="内容" rightIcon="icon-you" border></ui-cell>

# 右侧内容

<!-- 右侧内容 -->
<ui-cell title="右侧内容" value="内容" rightIcon="icon-you" border></ui-cell>

<!-- 右侧自定义内容 -->
<ui-cell title="最新订单" icon="icon-weibiaoti2010103" border>
  <template #right>
    <view class="ui-grid ui-center">
      <view class="ui-grid-6 padding-r-10">
        <ui-tag type="warning" size="xs" ui-style="border-radius: 2016rpx;">99</ui-tag>
      </view>
      <view class="ui-grid-6">
        <view class="iconfont icon-you"></view>
      </view>
    </view>
  </template>
</ui-cell>

# 特殊样式

# 圆角样式

<!-- 圆角 -->
<ui-cell title="圆形" ui-class="round"></ui-cell>

<!-- 整体圆角 -->
<view class="ui-card radius">
  <ui-form ref="form1" :model="form" ui-class="radius">
    <ui-cell rightIcon="icon-you" border>
      <template #left>
        <view class="padding-l-10" style="display: flex;"><ui-avatar /></view>
      </template>
    </ui-cell>
    <!-- 其他单元格 -->
  </ui-form>
</view>

# 组合使用

# 与开关组件组合

<ui-cell title="使用APP时保持常量" title-color="#444">
  <ui-form-switch type="warning" ui-class="ui-mini" v-model="form.switch1" />
</ui-cell>
<ui-cell title="屏幕常量时可以保证语言播报正常运行,主要保持手机电亮" title-color="#ccc"></ui-cell>

# 与表单组件组合

<ui-cell title="输入框" title-color="#ccc" border>
  <ui-form-item prop="input" error-position="right">
    <ui-form-input v-model="form.input" ui-style="width:500rpx;" :clearable="false" box-style="box-shadow:none;border-color:transparent;text-align:right"></ui-form-input>
  </ui-form-item>
</ui-cell>

# 与标签组件组合

<ui-cell title="拼车价格" title-color="#333" border>
  <ui-tag type="primary" light ui-class="radius" size="mini">322元</ui-tag>
</ui-cell>

<ui-cell title="多个标签" title-color="#333" border>
  <view class="ui-space-margin-6">
    <ui-tag type="primary" light ui-class="round" size="mini">322元</ui-tag>
    <ui-tag type="success" light ui-class="round" size="mini">322元</ui-tag>
  </view>
</ui-cell>

# 自定义模板

# 自定义左侧模板

<ui-cell rightIcon="icon-you" border>
  <template #left>
    <view class="padding-l-10" style="display: flex;"><ui-avatar /></view>
  </template>
</ui-cell>

<ui-cell>
  <template #left>
    <view class="padding-6" style="color:#f60">屏幕常量时可以保证语言播报正常运行</view>
  </template>
</ui-cell>

# 自定义右侧模板

<ui-cell title="复制链接" icon="icon-jurassic_user" title-color="#333" border @tap="onCopy" rightIcon="icon-fuzhi">
  <view style="color:#888;font-size: 12px;">https://www.qy.city</view>
</ui-cell>

# 必填字段

<!-- 必填字段 -->
<ui-cell title="必填字段" required rightIcon="icon-you" border></ui-cell>
<ui-cell title="必填字段带右侧内容" required value="内容" rightIcon="icon-you" border></ui-cell>
<ui-cell title="必填字段带左侧图标" required icon="icon-weibiaoti2010103" value="内容" rightIcon="icon-you" border></ui-cell>

# Props

属性名	类型	默认值	说明
title	String	-	左侧标题
label	String	-	左侧副标题
value	String	-	右侧内容
icon	String	-	左侧图标类名
image	String	-	左侧图片URL
rightIcon	String	-	右侧图标类名
border	Boolean	false	是否显示下边框
clickable	Boolean	false	是否可点击
disabled	Boolean	false	是否禁用
required	Boolean	false	是否必填
avatarSize	Number	50	左侧图片大小（rpx）
titleColor	String	#333	标题颜色
titleStyle	String	-	标题样式

# Events

事件名	说明	回调参数
tap	点击单元格时触发	-

# Slots

名称	说明
left	左侧自定义内容
right	右侧自定义内容

# 注意事项

单元格组件通常用于列表展示，建议在表单或列表容器中使用
当使用 clickable 属性时，会自动添加点击反馈效果
可以通过 ui-class 和 ui-style 属性自定义单元格样式
单元格支持与其他组件组合使用，如开关、输入框、标签等
当内容过长时，建议使用 label 属性或自定义模板来展示详细内容

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/cell/cell

← ui-card 卡片容器组件 ui-collapse 可折叠面板组件 →