更新记录

1.1.6（2025-10-31） 下载此版本

fix: 修改icon插槽

1.1.5（2025-10-29） 下载此版本

fix: 修改依赖

1.1.4（2025-10-29） 下载此版本

fix: 可以获取到r-cell-group的theme

查看更多

平台兼容性

uni-app(4.52)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ - - - √ × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

r-cell 单元格

单元格为列表中的单个展示项。

示例

<template>
  <view class="content">
    <!-- <r-badge :content="20" /> -->

    <r-config-provider>
      <view style="padding: 20px">基础用法</view>
      <r-cell-group>
        <r-cell title="单元格" value="内容" />
        <r-cell title="单元格" value="内容" label="描述信息" />
      </r-cell-group>
      <view style="padding: 20px">卡片风格</view>
      <r-cell-group inset>
        <r-cell title="单元格" value="内容" />
        <r-cell title="单元格" value="内容" label="描述信息" />
      </r-cell-group>
      <view style="padding: 20px">单元格大小</view>
      <r-cell title="单元格" value="内容" size="large" />
      <r-cell title="单元格" value="内容" size="large" label="描述信息" />

      <view style="padding: 20px">展示图标</view>
      <r-cell title="单元格" icon="location-o" />

      <view style="padding: 20px">展示箭头</view>
      <r-cell title="单元格" is-link />
      <r-cell title="单元格" is-link value="内容" />
      <r-cell title="单元格" is-link arrow-direction="down" value="内容" />

      <view style="padding: 20px">分组标题</view>
      <r-cell-group title="分组1">
        <r-cell title="单元格" value="内容" />
      </r-cell-group>
      <r-cell-group title="分组2">
        <r-cell title="单元格" value="内容" />
      </r-cell-group>
      <!--  -->
      <view style="padding: 20px">使用插槽</view>
      <r-cell value="内容" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">单元格</span>
          <r-tag type="primary">标签</r-tag>
        </template>
      </r-cell>
    </r-config-provider>

  </view>
</template>

API

CellGroup Props

名称 说明 类型 默认值 可选值
title 分组标题 String - -
inset 是否展示为圆角卡片风格 Boolean false true
border 是否显示外边框 Boolean false true
customStyle 自定义样式 Object {}
themeName r-theme 的主题 String default

Cell Props

名称 说明 类型 默认值 可选值
title 左侧标题 String - -
value 右侧内容 String - -
label 标题下方的描述信息 String - -
size 单元格大小 String - large | normal
icon 左侧图标名称,等同于 r-icon 组件的 name 属性 String -
iconPrefix 图标类名前缀，等同于 r-icon 组件的 prefix 属性 String r-icon iconfont
border 是否显示内边框 Boolean true false
clickable 是否开启点击反馈 Boolean false true
hoverClass 反馈的动画类 String animate__fadeIn 更多可使用animate
isLink 是否展示右侧箭头并开启点击反馈 Boolean false true
required 是否显示表单必填星号 Boolean false true
center 是否使内容垂直居中 Boolean false true
arrowDirection 箭头方向 String right left | up | down | right
titleStyle 左侧标题额外样式 Object {}
titleClass 左侧标题额外类名 String -
valueClass 右侧内容额外类名 String -
labelClass 描述信息额外类名 String -
customClass 自定义类 String -
themeName r-theme 的主题名称 String default
rightIconCustomStyle 右侧 icon 自定义样式 Object {}

CellGroup Slots

名称 说明
default 默认插槽
title 自定义分组标题

Cell Slots

名称 说明
title 自定义左侧标题
value 自定义右侧内容
label 自定义标题下方的描述信息
icon 自定义左侧图标
rightIcon 自定义右侧图标
extra 自定义单元格最右侧的额外内容

Cell Events

名称 说明 回调参数
click 点击单元格时触发 e

更多组件，请前往rainui

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...