Popover 气泡弹出框

介绍

弹出式的气泡菜单。

引入

import { IBestPopover, IBestPopoverAction } from "@ibestservices/ibest-ui";

事例通用代码

  @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%")
        .onChange((text: string) => {
          if(text){
            this.actions = text.split("").map(e => {
              let obj: IBestPopoverAction = {
                text: "选项" + e
              }
              return obj
            })
          }else{
            this.actions = [
              {
                text: '选项一'
              },
              {
                text: '选项二'
              },
              {
                text: '选项三'
              }
            ]
          }
        })
    }
  }

代码演示

基础用法

点我查看代码

@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)
  }
}

弹出位置

点我查看代码

@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", "左侧")
      })
    }
  }
}

选项配置

点我查看代码

@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", "选项禁用")
      })
    }
  }
}

自定义样式

点我查看代码

@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", "宽度")
      })
    }
  }
}

自定义内容

点我查看代码

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 \| number	`16`
textColor	文字颜色	ResourceColor	`#323232`
itemHeight	选项高度	string \| number	`44`
itemPadding	左右内边距	string \| number	`16`
textAlign	文字对齐方式	TextAlign	`-`
iconSize	自定义左侧图标	string \| number	`20`
iconColor	左侧图标大小	ResourceColor	`#323232`
dividerColor	左侧图标颜色	ResourceColor	`#ebedf0`
placement	弹出位置	Placement	`Bottom`
popoverWidth	文本字体大小	string \| number	`''`
bgColor	右侧图标名称	ResourceColor	`#fff`
showArrow	是否显示箭头	boolean	`true`
arrowWidth	箭头宽度	string \| number	`12`
arrowHeight	箭头高度	string \| number	`6`
popoverMask	是否显示遮罩	boolean	PopoverMask
space	气泡与目标的间隙	string \| number	`4`
radius	气泡圆角	string \| number	`8`
popoverShadow	气泡阴影	ShadowOptions \| ShadowStyle	`ShadowStyle.OUTER_DEFAULT_MD`

Events

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

插槽

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

IBestPopoverAction 数据结构

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

IBestPopoverController 实例

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

Popover 气泡弹出框 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

弹出位置 ​

选项配置 ​

自定义样式 ​

自定义内容 ​

API ​

@Props ​

Events ​

插槽 ​

IBestPopoverAction 数据结构 ​

IBestPopoverController 实例 ​

介绍

引入

代码演示

基础用法

弹出位置

选项配置

自定义样式

自定义内容

API

@Props

Events

插槽

IBestPopoverAction 数据结构

IBestPopoverController 实例