How to encapsulate bindPopup options

#harmonyos #bindpopup #popupoptionsencapsulation #reusablecomponents

Read the original article：How to encapsulate bindPopup options

Requirement Description

How to encapsulate the PopupOptions of bindPopup for reuse?

Preview effect:

Background Knowledge

bindPopup can bind a popup window to a component. Its parameter PopupOptions can be encapsulated to improve reusability.

Implementation Steps

Define the popup content, encapsulate its configuration for reuse, and use bindPopup in the component to display it when triggered.

Code Snippet

1.Define the content of the popup window:

   @Builder
   export function csPopupBuilder(title: string | Resource, color: string) {
     Column() {
       Text(title).fontSize(10)
         .padding({
           left: 6,
           right: 6,
           top: 3,
           bottom: 3
         })
         .fontColor(color)
     }
   }

2.Encapsulate the configuration attributes of the popup window:

   export function buildOptionsParams(that: Object, type: number, title: string | Resource): CustomPopupOptions {
     // You can parse skin configurations here, such as title, font color, background color, popup border color, offset, etc.
     return {
       builder: csPopupBuilder.bind(that, 'National Day and Mid-Autumn Festival holidays from October 1st to 8th, total 8 days. All toll roads (including airport expressways, toll bridges, and tunnels) are toll-free for small passenger cars.  ', '#FFFFFF'),
       placement: Placement.Bottom,
       offset: { y: -6 },
       arrowWidth: 10,
       arrowHeight: 6,
       backgroundBlurStyle: BlurStyle.NONE,
       popupColor: '#5291FF',
       onStateChange: (e) => {
         if (!e.isVisible) {
         }
       }
     }
   }

3.Use bindPopup in a component to create a popup window:

   @Entry
   @Component
   struct Index {
     @State message: string = 'Warm Reminder';
     @State isShowSchedulePopupGuide: boolean = false

     build() {
       RelativeContainer() {
         Text(this.message)
           .id('HelloWorld')
           .fontSize(12)
           .fontWeight(FontWeight.Bold)
           .alignRules({
             center: { anchor: '__container__', align: VerticalAlign.Center },
             middle: { anchor: '__container__', align: HorizontalAlign.Center }
           })
           .onClick(() => {
             this.isShowSchedulePopupGuide = !this.isShowSchedulePopupGuide
           })
           .bindPopup(this.isShowSchedulePopupGuide, buildOptionsParams(this, 1, 'Message content'))

       }
       .height('100%')
       .width('100%')
     }
   }

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release and above for compilation and running

DEV Community