iBest-UI@HarmonyOS

Appearance

Cell 单元格 ​

介绍 ​

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

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

点我查看代码
ts
IBestCellGroup() {
  IBestCell({
    title: '标题',
    value: '内容'
  })

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

卡片风格 ​

卡片风格

TIP

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

点我查看代码
ts
IBestCellGroup({ inset: true }) {
  IBestCell({
    title: '标题',
    value: '内容'
  })

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

分组标题 ​

分组标题

TIP

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

点我查看代码
ts
IBestCellGroup({ title: '分组1' }) {
  IBestCell({
    title: '标题',
    value: '内容',
    label: '描述信息',
    hasBorder: false
  })
}

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

单元格大小 ​

单元格大小

TIP

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

点我查看代码
ts
IBestCell({
  title: "标题",
  value: "内容",
  cellSize: "large",
});

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

展示图标 ​

基础用法

TIP

通过 iconBuilder 插槽在标题左侧展示图标。

点我查看代码
ts
import { IBestCell } from "@ibestservices/ibest-ui";

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

  build(){
    IBestCell({
      title: '标题',
      value: '内容',
      iconBuilder: this.StarIcon(),
      hasBorder: false
    })
  }
}

展示箭头 ​

展示箭头

TIP

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

点我查看代码
ts
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 属性后会在单元格左侧显示必填*号。

点我查看代码
ts
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的左右内容都垂直居中。

点我查看代码
ts
import { IBestCell } from "@ibestservices/ibest-ui";

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

  build(){
    // ...

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

    // ...
  }
}

使用插槽 ​

使用插槽

TIP

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

点我查看代码
ts
import { IBestCell, IBestTag } from "@ibestservices/ibest-ui";

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

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

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

  build(){
    // ...

    IBestCell({
      title: '标题',
      value: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
      iconBuilder: this.StarIcon('32lpx'),
      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是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

Cell @Props ​

参数说明类型默认值
title左侧标题number | string
titleColor左侧标题文字颜色string
#323233
value右侧内容number | string
valueColor右侧内容文字颜色string
#969799
label标题下方的描述信息number | string
labelColor标题下方的描述信息文字颜色string
#969799
cellSize单元格大小，可选值为 large normalstring
hasBorder是否显示内边框booleantrue
clickable是否开启点击反馈booleanfalse
isLink是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
arrowDirection箭头方向，可选值为 left up downstringright

Events ​

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

@BuilderParam 插槽 ​

插槽名说明类型
titleBuildertitle 的插槽 优先级大于 @Prop titleCustomBuilder | null
valueBuildervalue 的插槽 优先级大于 @Prop valueCustomBuilder | null
labelBuilderlabel 的插槽 优先级大于 @Prop labelCustomBuilder | null
iconBuilder自定义title左侧icon的插槽, 使用titleBuilder时，该插槽不生效CustomBuilder | null
rightIconBuilder自定义value右侧icon的插槽, 使用valueBuilder时，该插槽不生效CustomBuilder | null