IBest-UI@HarmonyOS

Appearance

Popover 气泡弹出框 ​

介绍 ​

弹出式的气泡菜单。

引入 ​

ts
import { IBestPopover, IBestPopoverAction } from "@ibestservices/ibest-ui";
事例通用代码
ts
  @State textValue: string = ""
  @Builder triggerBuilder(type: string, text?: string){
    if(type == "button"){
      IBestButton({
        type: "primary",
        text
      })
    }else if(type == "text"){
      Text(text)
    }else if(type == "img"){
      Image($r("app.media.app_icon")).width(30)
    }else if(type == "input"){
      TextInput({text: this.textValue, placeholder: text})
        .width("100%")
        .focusable(false)
    }
  }

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State actions: IBestPopoverAction[] = [
    {
      text: '选项一'
    },
    {
      text: '选项二'
    },
    {
      text: '选项三'
    },
    {
      text: '选项四'
    }
  ]
  build() {
    Column({space: 16}){
      Row({space: 16}){
        IBestPopover({
          actions: this.actions,
          triggerBuilder: (): void => this.triggerBuilder("button", "基础用法"),
          onSelect: (action: IBestPopoverAction, index: number) => {
            IBestToast.show(action.text)
          }
        })
        IBestPopover({
          actions: this.actions,
          triggerBuilder: (): void => this.triggerBuilder("text", "文字触发")
        })
        IBestPopover({
          actions: this.actions,
          triggerBuilder: (): void => this.triggerBuilder("img")
        })
      }
      IBestPopover({
        actions: this.actions,
        popoverWidth: "100%",
        triggerBuilder: (): void => this.triggerBuilder("input", "输入框触发"),
        onSelect: (action: IBestPopoverAction, index: number) => {
          this.textValue = action.text
        }
      })
    }.width("100%").alignItems(HorizontalAlign.Start)
  }
}

弹出位置 ​

弹出位置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State actions: IBestPopoverAction[] = [
    {
      text: '选项一'
    },
    {
      text: '选项二'
    }
  ]
  build() {
    Row({space: 16}){
      IBestPopover({
        actions: this.actions,
        placement: Placement.Right,
        triggerBuilder: (): void => this.triggerBuilder("button", "右侧")
      })
      IBestPopover({
        actions: this.actions,
        placement: Placement.TopLeft,
        triggerBuilder: (): void => this.triggerBuilder("button", "上左侧")
      })
      IBestPopover({
        actions: this.actions,
        placement: Placement.TopRight,
        triggerBuilder: (): void => this.triggerBuilder("button", "上右侧")
      })
      IBestPopover({
        actions: this.actions,
        placement: Placement.Left,
        triggerBuilder: (): void => this.triggerBuilder("button", "左侧")
      })
    }
  }
}

选项配置 ​

选项配置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State actions: IBestPopoverAction[] = [
    {
      text: '选项一',
      iconName: 'add-o'
    },
    {
      text: '选项二',
      iconName: 'music-o'
    },
    {
      text: '选项三',
      icon: $r("app.media.app_icon")
    }
  ]
  @State actions1: IBestPopoverAction[] = [
    {
      text: '选项一',
      disabled: true
    },
    {
      text: '选项二',
      disabled: true
    },
    {
      text: '选项三'
    }
  ]
  build() {
    Row({space: 16}){
      IBestPopover({
        actions: this.actions,
        triggerBuilder: (): void => this.triggerBuilder("button", "展示图标")
      })
      IBestPopover({
        actions: this.actions1,
        triggerBuilder: (): void => this.triggerBuilder("button", "选项禁用")
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State actions: IBestPopoverAction[] = [
    {
      text: '选项一'
    },
    {
      text: '选项二'
    },
    {
      text: '选项三'
    },
    {
      text: '选项四'
    }
  ]
  build() {
    Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20)}}){
      IBestPopover({
        actions: this.actions,
        showArrow: false,
        triggerBuilder: (): void => this.triggerBuilder("button", "隐藏箭头")
      })
      IBestPopover({
        actions: this.actions,
        space: 12,
        triggerBuilder: (): void => this.triggerBuilder("button", "间距")
      })
      IBestPopover({
        actions: this.actions,
        radius: 16,
        triggerBuilder: (): void => this.triggerBuilder("button", "圆角")
      })
      IBestPopover({
        actions: this.actions,
        bgColor: '#4a4a4a',
        textColor: '#fff',
        dividerColor: "#646566",
        triggerBuilder: (): void => this.triggerBuilder("button", "背景色")
      })
      IBestPopover({
        actions: this.actions,
        popoverWidth: 200,
        triggerBuilder: (): void => this.triggerBuilder("button", "宽度")
      })
    }
  }
}

自定义内容 ​

自定义内容

点我查看代码
ts
import { IBestPopoverController } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  private controller: IBestPopoverController = new IBestPopoverController()
  @Builder popoverContent(){
    Column({space: 14}){
      Row({space: 14}){
        Image($r("app.media.app_icon")).width(18)
        Text("自定义提示内容")
      }
      IBestButton({
        type: "primary",
        buttonSize: "small",
        text: "确定",
        onClickBtn: () => {
          this.controller.close()
        }
      })
    }
    .alignItems(HorizontalAlign.End)
    .padding(16)
  }
  build() {
    Row({space: 16}){
      IBestButton({
        type: "primary",
        text: "打开popover",
        onClickBtn: () => {
          this.controller.open()
        }
      })
      IBestPopover({
        controller: this.controller,
        actions: this.actions,
        triggerBuilder: (): void => this.triggerBuilder("button", "自定义内容"),
        popoverContentBuilder: (): void => this.popoverContent()
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
actions通知栏文本内容IBestPopoverAction[][]
textFontSize选项文字大小string | number16
textColor文字颜色ResourceColor#323232
itemHeight选项高度string | number44
itemPadding左右内边距string | number16
textAlign文字对齐方式TextAlign-
iconSize自定义左侧图标string | number20
iconColor左侧图标大小ResourceColor#323232
dividerColor左侧图标颜色ResourceColor#ebedf0
placement弹出位置PlacementBottom
popoverWidth文本字体大小string | number''
bgColor右侧图标名称ResourceColor#fff
showArrow是否显示箭头booleantrue
arrowWidth箭头宽度string | number12
arrowHeight箭头高度string | number6
popoverMask是否显示遮罩booleanPopoverMask
space气泡与目标的间隙string | number4
radius气泡圆角string | number8
popoverShadow气泡阴影ShadowOptions | ShadowStyleShadowStyle.OUTER_DEFAULT_MD

Events ​

事件名说明回调参数
onSelect点击通知栏回调action: IBestPopoverAction, index: number

插槽 ​

插槽名说明类型
triggerBuilder触发气泡的对象CustomBuilder
popoverContentBuilder自定义popover内容CustomBuilder

IBestPopoverAction 数据结构 ​

属性名说明类型默认值
text选项文字string''
iconName文字左侧图标名称string''
icon自定义文字左侧图标ResourceStr''
color左侧图标颜色ResourceColor''
disabled是否禁用boolean''

IBestPopoverController 实例 ​

方法名说明参数类型
open打开气泡-
close关闭气泡-