Panel

About 7 min

Panel

可滑动面板。提供一种轻量的内容展示的窗口,可方便的在不同尺寸中切换,属于弹出式组件。

权限列表

子组件

可以包含子组件。

接口

Panel(value:{show:boolean})

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    show

    boolean

    -

    控制Panel显示或隐藏。

属性

名称

参数类型

默认值

描述

type

PanelType

Foldable

设置可滑动面板的类型。

mode

PanelMode

-

设置可滑动面板的初始状态。

dragBar

boolean

true

设置是否存在dragbar,true表示存在,false表示不存在。

fullHeight

Length

-

指定PanelMode.Full状态下的高度。

halfHeight

Length

-

指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。

miniHeight

Length

-

指定PanelMode.Mini状态下的高度。

  • PanelType枚举说明

    名称

    描述

    Minibar

    提供minibar和类全屏展示切换效果。

    Foldable

    内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。

    Temporary

    内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。

  • PanelMode枚举说明

    名称

    描述

    Mini

    类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。

    Half

    类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。

    Full

    类全屏状态。

事件

名称

功能描述

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

当可滑动面板发生状态变化时触发, 返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。

示例

@Entry
@Component
struct PanelExample {
  @State show: boolean = false

  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%').height(50).borderRadius(10)
        .backgroundColor(0xFFFFFF).padding({ left: 20 })
        .onClick(() => {
          this.show = !this.show
        })
      Panel(this.show) { // 展示日程
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable).mode(PanelMode.Half)
      .dragBar(true) // 默认开启
      .halfHeight(500) // 默认一半
      .onChange((value: any) => {
        console.info(`width:${value.width},height:${value.height},mode:${value.mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29