IBest-UI

Appearance

FloatBubble 浮动气泡 ​

介绍 ​

悬浮在页面边缘的可点击气泡。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

• 使用时需要通过 show 属性控制气泡的显隐, 具体显隐时机需开发者自己控制;
• 如果当前页面内需要跳转其他页面, 且需要隐藏气泡, 需要手动设置 show 为 false。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State bubbleShow: boolean = false
  build() {
    NavDestination(){
      IBestFloatBubble({
        show: this.bubbleShow,
        icon: "chat",
        onBubbleClick: () => {
          IBestToast.show("点击了气泡")
        }
      })
    }
    .onShown(() => {
      this.bubbleShow = true
    })
    .onWillHide(() => {
      this.bubbleShow = false
    })
  }
}

自动隐藏 ​

自动隐藏

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State bubbleShow: boolean = false
  build() {
    NavDestination(){
      IBestFloatBubble({
        show: this.bubbleShow,
        icon: "chat",
        dragAxis: "xy",
        autoHide: true
      })
    }
    .onShown(() => {
      this.bubbleShow = true
    })
    .onWillHide(() => {
      this.bubbleShow = false
    })
  }
}

自定颜色和内容 ​

自定颜色和内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State bubbleShow: boolean = false
  @Builder customBubble(){
    Column({space: 6}){
      IBestIcon({
        name: "replay",
        iconSize: 16,
        color: "#fff"
      })
      Text("刷新").fontSize(12).fontColor("#fff")
    }
  }
  build() {
    NavDestination(){
      IBestFloatBubble({
        show: this.bubbleShow,
        bubbleSize: 54,
        bgColor: "#ed4040",
        pos: {right: 0, bottom: 100},
        bubbleShadow: {
          radius: 14,
          color: "#333"
        }
      }){
        this.customBubble()
      }
    }
    .onShown(() => {
      this.bubbleShow = true
    })
    .onWillHide(() => {
      this.bubbleShow = false
    })
  }
}

API ​

@Props ​

参数说明类型默认值
show是否展示booleanfalse
bgColor气泡背景色ResourceColor#1989fa
bubbleSize气泡大小number | string48
shape气泡形状, 可选值为 circle squarestringcircle
radius圆角, 仅shap为 square 时生效number | string6
icon图标ResourceStr-
iconSize图标大小number | string24
iconColor图标颜色ResourceColor#fff
pos气泡初始位置IBestEdges-
dragAxis可拖拽方向, 可选值为 x y xy lockstringy
gap气泡与窗口最小间距number24
isMagnetic是否开启磁吸booleantrue
bubbleShadow气泡阴影ShadowOptions | ShadowStyle-
autoHide自动磁吸后是否自动延时隐藏, 仅isMagnetic为true时有效booleanfalse
hideDelay延时隐藏时间, 单位ms, 仅autoHide为true时有效number2000
remainSize隐藏时预留尺寸, 仅autoHide为true时有效number20

IBestEdges 数据结构 ​

参数说明类型
top顶部距离number
left左侧距离number
right右侧距离, 优先级大于leftnumber
bottom底部距离, 优先级大于topnumber

插槽 ​

插槽名说明类型
defaultBuilder自定义气泡的内容CustomBuilder

Events ​

事件名说明回调参数
onBubbleClick点击气泡触发-