MaterialBackdrop

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content. MaterialBackdrop is a library of OpenHarmony, which is used to apply backdrop functionality, in eTS. It allows user to create their custom UIs and add backdrop functionality to it.

Installation

npm i @ohos/materialbackdrop

Import

To be able to use backdrop, below import statement should be used

import { Backdrop, BackdropModel, BackDropState, BackdropType }  from '@ohos/materialbackdrop'

Usage Instruction

Model 1

//Creating object 
private model: BackdropModel = new BackdropModel(BackdropType.Model1)

Create two UI and pass them to the library, which will act as front layer and back layer. The user have freedom to choose the triggering element for revealing and concealing the backdrop.

//UI for both layers 
@Builder backPage():any {
    .
    .
    triggerringElement(){
        .
        .
        }.onClick(()=>{
            //Change BackDropState
            triggerBackdrop(this.flag)   //pass value of BackdropState
            })
    .
    .
    }
@Builder frontPage():any {
    .
    .
    //Add triggerring element if needed
    .
    }   

//Passing parameters to Backdrop
Backdrop({
        obj: $model,
        backLayout: this.backPage(),
        frontLayout: this.frontPage()
      })

Working

Screenshots

Model 2

//Creating object 
private model: BackdropModel = new BackdropModel(BackdropType.Model1)

Create and pass UIs as mentioned in Model 1. The difference of model 2 can be noticed when the back content height is less than the whole screen height.

  aboutToAppear() {
    this.backdrop.setBackContentHeight('176vp')
  }

//UI for both layers 
@Builder backPage():any {
    .
    .
    triggerringElement(){
        .
        .
        }.onClick(()=>{
            //Change BackDropState
            triggerBackdrop(this.flag)   //pass value of BackdropState
            })
    .
    .
    }
@Builder frontPage():any {
    .
    .
    //Add triggerring element if needed
    .
    .
    }   

//Passing parameters to Backdrop
Backdrop({
        obj: $model,
        backLayout: this.backPage(),
        frontLayout: this.frontPage()
      })

Working

Screenshots

Compatibility

Supports OpenHarmony API version 9

Code Contribution

If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.

Open Source License

This project is based on Apache License 2.0, please enjoy and participate in open source freely.

Reference:

Designed by : Bibek Lakra