HIPS-UNI-UI

# Cell 单元格

# 使用指南

import Cell from '@hips/uni-ui/lib/cell';

export default {
  components: {
    'hips-cell': Cell,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-cell title="标题" value="内容" />
<hips-cell
  title="标题"
  value="内容"
  description="跳转到百度首页 https://www.baidu.com"
  value-align
  is-link
  url="https://www.baidu.com"
/>
1
2
3
4
5
6
7
8
9

# 只设置 value

只设置 value 时内容会向左对齐 (有 title 时居右显示)

<hips-cell
  value="这是一段只设置了value属性的内容，居左显示（有title属性时居右显示）"
/>
1
2
3

# 展示图标

通过icon属性在标题左侧展示图标， clickable 标记该单元格可以点击，并有反馈效果，通过right-icon 属性在单元格右侧自定义图标展示

<hips-cell title="标题" value="内容" icon="photo" clickable>
  <hips-icon slot="right-icon" name="edit" class="hips-cell__right-icon" />
</hips-cell>
1
2
3

# 高级用法

我们还可以使用 title 和 value 对应的slot 来自定义显示 2 个区域的内容

<hips-cell value="内容" icon="star-o" is-link>
  <template slot="title">
    <span class="hips-cell-text">标题</span>
    <hips-badge type="error" value="10" />
  </template>

  <template slot="value">
    <span class="hips-cell-text">内容</span>
    <hips-badge type="error" value="10" />
  </template>
</hips-cell>
1
2
3
4
5
6
7
8
9
10
11

# 使用 custom 插槽 (自定义单元格)

如果上面的用法都不能满足需求，可以传入slot='custom'插槽, 自定义单元格中的内容

<hips-cell clickable>
  <template slot="custom">
    <span class="hips-cell-text">这里是自定义内容</span>
  </template>
</hips-cell>
1
2
3
4
5

# Cell API

参数 说明 类型 默认值
icon 左侧图标，可选值见 Icon 组件 String -
title 左侧标题 String | Number -
value 右侧内容 String | Number -
description 标题下方的描述信息 String -
border 是否显示内边框 Boolean true
value-align 是否使 value 的内容垂直居中 Boolean false
url 跳转链接 String -
to 路由跳转对象，同 vue-router 的 to String | Object -
replace 跳转时是否替换当前 history String false
clickable 是否开启点击反馈 Boolean false
is-link 是否展示右侧箭头并开启点击反馈 Boolean false
required 是否显示表单必填星号 Boolean false
arrow-direction 箭头方向，可选值为 left up down String -
ellipsis 是否开启内容的行内省略号模式 Boolean false

# Cell Event

事件名 说明 参数
click 点击 cell 时触发 -

# Cell Slot

名称 说明
custom 自定义单元格的内容与布局
icon 自定义icon
title 自定义title
value 自定义 value
right-icon 自定义右侧按钮，默认是arrow

# 样式变量

变量名 说明 默认值
cell-title-color 标题文字颜色 #6D7A80
cell-title-font-size 标题文字大小 32rpx
cell-title-content-line-height 标题内容行高 56rpx
cell-description-color 描述文字颜色 #9B9B9B
cell-description-font-size 描述文字大小 28rpx
cell-description-height 描述内容高度 40rpx
cell-value-color 内容文字颜色 #4d4d44
cell-value-font-size 内容文字大小 32rpx
cell-value-line-height 内容行高 56rpx
cell-line-height 行高 48rpx
cell-bg-color 背景颜色 white
cell-in-group-margin-left 在分组中左侧 margin 30rpx
cell-border-color 边框颜色 #EEEEEE
cell-side-icon-margin 两边图标与内容的 margin 距离 20rpx
cell-active-bg-color 点击状态下背景颜色 #e8e8e8
cell-required-left 必输标志左侧距离 10rpx
cell-required-top 必输标志顶部距离 0
cell-required-font-size 必输标志文字大小 24rpx
cell-required-color 必输标志文字颜色 #f96f68

注意

Collapse 折叠面板