IBest-UI@HarmonyOS

Appearance

Divider 分割线 ​

介绍 ​

用于将内容分隔为多个区域。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
  IBestDivider()
  }
}

展示文本 ​

展示文本

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder textBuilder(){
    Row({space: 10}){
      Image($r("app.media.icon_star")).width(16)
      Text("自定义内容")
    }
  }
  build() {
    Column({space: 16}){
      IBestDivider({ text: '细线' })
      IBestDivider({text: '非细线', hairline: false})
      IBestDivider({
        textBuilder: this.textBuilder
      })
    }.padding({top: 16, bottom: 16})
  }
}

内容位置 ​

内容位置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 16}){
      IBestDivider({
        text: '文本',
        leftLineWidth: "10%"
      })
      IBestDivider({
        text: '文本',
        rightLineWidth: 50
      })
    }.padding({top: 16, bottom: 16})
  }
}

虚线 ​

虚线

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestDivider({
      text: '文本',
      dashed: true
    })
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestDivider({
      text: '文本',
      color: "#3d8af2",
      lineColor: "#3d8af2",
      leftRightPadding: 20
    })
  }
}

垂直 ​

垂直

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row(){
      IBestDivider({ text: '文本', vertical: true })
      Text("文本")
      IBestDivider({ text: '文本', vertical: true, dashed: true })
      Text("文本")
      IBestDivider({ text: '文本', vertical: true, hairline: false })
      Text("文本")
      IBestDivider({ text: '文本', vertical: true, lineColor: "#3d8af2" })
    }.padding(16)
  }
}

API ​

@Props ​

参数说明类型默认值
dashed是否使用虚线booleanfalse
hairline是否显示细线booleantrue
vertical是否为垂直方向booleanfalse
lineHeight分割线高度, 仅垂直时有效number | string14
lineColor分割线颜色ResourceColor#ebedf0
text文本内容, 仅水平时生效string''
color文本内容颜色, 仅水平时生效ResourceColor#969799
textFontSize文本字体大小, 仅水平时生效number | string14
textLineSpace文本与线段间距, 仅水平时生效number | string16
leftLineWidth左侧线段宽度, 仅水平时生效number | string''
rightLineWidth右侧线段宽度, 仅水平时生效number | string''
leftRightPadding左右内边距, 仅水平时生效number | string0
leftRightMargin左右外边距, 仅垂直时生效number | string8

插槽 ​

插槽名说明类型
textBuilder自定义文本内容CustomBuilder