Cell 单元格

介绍

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

引入

import { IBestCell, IBestCellGroup } from "@ibestservices/ibest-ui";

代码演示

基础用法

TIP

Cell 可以单独使用，也可以与 CellGroup， CellGroup 可以为 Cell 提供上下外边框。

点我查看代码

IBestCellGroup() {
  IBestCell({
    title: '标题',
    value: '内容'
  })

  IBestCell({
    title: '标题',
    value: '内容',
    label: '描述信息',
    hasBorder: false
  })
}

下边框样式

点我查看代码

IBestCellGroup() {
  IBestCell({ title: 'full', value: '内容', borderSizeType: 'full' })
  IBestCell({ title: 'center', value: '内容', borderSizeType: 'center' })
  IBestCell({
    leftIcon: $r("app.media.icon_like_o"),
    title: 'right',
    value: '内容',
    borderSizeType: 'right'
  })
  IBestCell({ title: '占位', value: '内容', hasBorder: false })
}

卡片风格

TIP

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格

点我查看代码

IBestCellGroup({ inset: true }) {
  IBestCell({
    title: '标题',
    value: '内容'
  })

  IBestCell({
    title: '标题',
    value: '内容',
    label: '描述信息',
    hasBorder: false
  })
}

分组标题

TIP

通过 CellGroup 的 title 属性可以指定分组标题。

点我查看代码

IBestCellGroup({ title: '分组1' }) {
  IBestCell({
    title: '标题',
    value: '内容',
    label: '描述信息',
    hasBorder: false
  })
}

IBestCellGroup({ title: '分组2' }) {
  IBestCell({
    title: '标题',
    value: '内容',
    label: '描述信息',
    hasBorder: false
  })
}

单元格大小

TIP

通过 cellSize 属性可以控制单元格的大小。

点我查看代码

IBestCell({
  title: "标题",
  value: "内容",
  cellSize: "large",
});

IBestCell({
  title: "标题",
  value: "内容",
  label: "描述信息",
  hasBorder: false,
  cellSize: "large",
});

展示图标

点我查看代码

import { IBestCell } from "@ibestservices/ibest-ui";

@Entry
@Component
struct CellPage {
  @Builder
  StarIcon(height = 24) {
    Image($r('app.media.startIcon')).height(height).margin({ right: 10 })
  }

  build(){
    Column(){
      IBestCell({
        title: '标题',
        value: '内容',
        leftIcon: $r("app.media.icon_like")
      })
      IBestCell({
        title: '标题',
        value: '内容',
        iconBuilder: () => {
          this.StarIcon()
        }
      })
      IBestCell({
        title: '标题',
        value: '内容',
        rightIcon: $r("app.media.icon_star"),
        rightIconColor: '#FF0000',
        hasBorder: false
      })
    }
  }
}

展示箭头

TIP

设置 isLink 属性后会在单元格右侧显示箭头，并且可以通过 arrowDirection 属性控制箭头方向。

点我查看代码

IBestCell({
  title: "标题",
  value: "箭头朝右",
  isLink: true,
});

IBestCell({
  title: "标题",
  value: "箭头朝下",
  isLink: true,
  arrowDirection: "bottom",
});

IBestCell({
  title: "标题",
  value: "箭头朝左",
  isLink: true,
  arrowDirection: "left",
});

IBestCell({
  title: "标题",
  value: "箭头朝上",
  isLink: true,
  arrowDirection: "top",
  hasBorder: false,
});

必填项

TIP

设置 required 属性后会在单元格左侧显示必填*号。

点我查看代码

import { IBestCell } from "@ibestservices/ibest-ui";

@Entry
@Component
struct CellPage {
  @Builder
  InputContain() {
    TextInput({ placeholder: '请输入内容' })
  }

  build(){
    IBestCell({
      title: '标题',
      value: '内容',
      required: true,
      hasBorder: false,
      valueBuilder: this.InputContain.bind(this)
    })
  }
}

垂直居中

TIP

通过 center 属性可以让 Cell的左右内容都垂直居中。

点我查看代码

import { IBestCell } from "@ibestservices/ibest-ui";

@Entry
@Component
struct CellPage {
  @Builder
  StarIcon(height = 24) {
    Image($r('app.media.startIcon')).height(height).margin({ right: 10 })
  }

  build(){
    // ...

    IBestCell({
      title: '居中',
      label: '描述内容',
      value: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
      center: true,
      iconBuilder: this.StarIcon(16),
      isLink: true
    })
    IBestCell({
      title: '居上',
      label: '描述内容',
      value: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
      hasBorder: false,
      iconBuilder: this.StarIcon(16),
      isLink: true
    })

    // ...
  }
}

使用插槽

TIP

如以上用法不能满足你的需求，可以使用@BuilderParams插槽来自定义内容。

点我查看代码

import { IBestCell, IBestTag } from "@ibestservices/ibest-ui";

@Entry
@Component
struct CellPage {
  @Builder
  StarIcon(height = 24) {
    Image($r('app.media.startIcon')).height(height).margin({ right: 10 })
  }

  @Builder
  Arrow() {
    Image($r('app.media.title_back'))
    .height(12)
  }

  @Builder
  Title() {
    Row() {
      Text('单元格')
        .fontSize(14)
      IBestTag({ text: '标签' })
        .margin({
          left: 5
        })
    }
  }

  build(){
    // ...

    IBestCell({
      title: '标题',
      value: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
      iconBuilder: this.StarIcon(16),
      rightIconBuilder: this.Arrow,
      clickable: true
    })

    IBestCell({
      titleBuilder: this.Title,
      value: '内容',
      rightIconBuilder: this.Arrow,
      clickable: true
    })

    IBestCell({
      title: '标题',
      iconBuilder: this.StarIcon(),
      hasBorder: false,
      rightIconBuilder: this.Arrow,
      clickable: true
    })

    // ...
  }
}

API

CellGroup @Props

参数	说明	类型	默认值
title	分组标题	string
inset	是否展示为圆角卡片风格	boolean	`false`
border	是否显示外边框	boolean	`true`

Cell @Props

参数	说明	类型	默认值
title	左侧标题	number \| string
titleColor	左侧标题文字颜色	ResourceColor	`#323233`
value	右侧内容	number \| string
valueColor	右侧内容文字颜色	ResourceColor	`#969799`
label	标题下方的描述信息	number \| string
labelColor	标题下方的描述信息文字颜色	ResourceColor	`#969799`
cellSize	单元格大小，可选值为 `large` `normal`	string
hasBorder	是否显示内边框	boolean	`true`
clickable	是否开启点击反馈	boolean	`false`
isLink	是否展示右侧箭头并开启点击反馈	boolean	`false`
required	是否显示表单必填星号	boolean	`false`
center	是否使内容垂直居中	boolean	`false`
arrowDirection	箭头方向，可选值为 left up down	string	`right`
leftIcon	左侧图标	ResourceStr
leftIconColor	左侧图标颜色	ResourceStr
leftIconSize	左侧图标大小	number \| string	`16`
rightIcon	右侧图标	ResourceStr
rightIconColor	右侧图标颜色	ResourceStr
rightIconSize	右侧图标大小	number \| string	`16`
leftIconMarginRight 1.18.0	左侧图标与title间距	number \| string	`4`
rightIconMarginLeft 1.18.0	右侧图标与内容间距	number \| string	`4`
leftContentWidth 1.18.0	左侧内容宽度	number \| string	``
leftRightPadding 1.18.0	左右padding	number \| string	`16`
borderSizeType 1.18.0	底部分割线尺寸类型, 可选值 `full` `center` `right`	string	`center`
borderLeft 1.18.0	底部分割线left值, `borderSizeType` 为 `right` 时有效	Dimension	`16`
bdColor 1.18.0	底部分割线颜色	ResourceColor	`#ebedf0`

Events

事件名	说明	事件类型
onClickCell	点击单元格的回调事件	(event?: ClickEvent) => void

插槽

插槽名	说明	类型
titleBuilder	`title` 的插槽优先级大于 `@Prop title`	CustomBuilder
valueBuilder	`value` 的插槽优先级大于 `@Prop value`	CustomBuilder
labelBuilder	`label` 的插槽优先级大于 `@Prop label`	CustomBuilder
iconBuilder	自定义`title`左侧`icon`的插槽, 使用`titleBuilder`时，该插槽不生效	CustomBuilder
rightIconBuilder	自定义`value`右侧`icon`的插槽, 使用`valueBuilder`时，该插槽不生效	CustomBuilder

Cell 单元格 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

下边框样式 ​

卡片风格 ​

分组标题 ​

单元格大小 ​

展示图标 ​

展示箭头 ​

必填项 ​

垂直居中 ​

使用插槽 ​

API ​

CellGroup @Props ​

Cell @Props ​

Events ​

插槽 ​

Cell 单元格

介绍

引入

代码演示

基础用法

下边框样式

卡片风格

分组标题

单元格大小

展示图标

展示箭头

必填项

垂直居中

使用插槽

API

CellGroup @Props

Cell @Props

Events

插槽