Material_UI_Component_Snackbar

Material component Snackbar design in OpenHarmony.

Download & Install

Install using npm

npm i @ohos/materialsnackbar

Usage Instructions

To be able to use snackbars, below import statement must be used

import { MaterialSnackBar ,
  SnackBarModel ,SnackBarType
}  from "@ohos/materialsnackbar"

Access snackbar attributes through a object of SnackBarModel and customize the snackbar(if needed) using setter functions as shown and finally pass the object to MaterialSnackBar and action associated with action button.

Snackbar Designs:

SimpleSnack ( Snackbar with only message )

//Creating object
@State snackBarModel1: SnackBarModel = new SnackBarModel(SnackBarType.SimpleSnack)

//Customization
aboutToAppear(){
    this.snackBarModel1.setSnackBarText("Text associated with SimpleSnack")    //Mandatory
    this.snackBarModel1.setSnackTextColor("#ffffff")
    this.snackBarModel1.setSnackBackColor("#9400D3")
    this.snackBarModel1.setOpacity(1)
    this.snackBarModel1.setTimer(4000)
}

//Passing Customized/Non-customized object to MaterialSnackBar
MaterialSnackBar({
          obj : this.snackBarModel1
        })

OneLineActionSnack ( Snackbar with one line message plus the action button )

//Creating object
@State snackBarModel2: SnackBarModel = new SnackBarModel(SnackBarType.OneLineActionSnack)
//Custom Action 
  SnackButtonAction: () => void = function () {
    console.log("test")
  }

//Customization
aboutToAppear(){
    this.snackBarModel2.setSnackBarText("Text of OneLineActionSnack")       //Mandatory
    this.snackBarModel2.setSnackTextColor("#ffffff")
    this.snackBarModel2.setSnackBackColor("#9400D3")
    this.snackBarModel2.setOpacity(1)
    this.snackBarModel2.setTimer(4000)
    this.snackBarModel2.setButtonText("ACTION")                              //Mandatory
    this.snackBarModel2.setButtonTextColor("#ECD540")
}

//Passing Customized/Non-customized object to MaterialSnackBar
MaterialSnackBar({
          obj : this.snackBarModel2,
          func : this.SnackButtonAction
        })

TwoLineActionSnack ( Snackbar with two line message plus the action button )

//Creating object
@State snackBarModel3: SnackBarModel = new SnackBarModel(SnackBarType.TwoLineActionSnack)
//Custom Action 
  SnackButtonAction: () => void = function () {
    console.log("test")
  }

//Customization
aboutToAppear(){
    this.snackBarModel3.setSnackBarText("Longer text associated with TwoLineActionSnack") //Mandatory
    this.snackBarModel3.setSnackTextColor("#ffffff")
    this.snackBarModel3.setSnackBackColor("#9400D3")
    this.snackBarModel3.setOpacity(1)
    this.snackBarModel3.setTimer(4000)
    this.snackBarModel3.setButtonText("ACTION")                                           //Mandatory
    this.snackBarModel3.setButtonTextColor("#ECD540")
}

//Passing Customized/Non-customized object to MaterialSnackBar
MaterialSnackBar({
          obj : this.snackBarModel3,
          func : this.SnackButtonAction
        })

BigLineActionSnack ( Snackbar with longer two line message plus the longer action button )

//Creating object
@State snackBarModel4: SnackBarModel = new SnackBarModel(SnackBarType.BigTwoLineActionSnack)
//Custom Action 
  SnackButtonAction: () => void = function () {
    console.log("test")
  }

//Customization
aboutToAppear(){
    this.snackBarModel4.setSnackBarText("Longer text associated with   BigTwoLineActionSnack")    //Mandatory
    this.snackBarModel4.setSnackTextColor("#ffffff")
    this.snackBarModel4.setSnackBackColor("#9400D3")
    this.snackBarModel4.setOpacity(1)
    this.snackBarModel4.setTimer(4000)
    this.snackBarModel4.setButtonText("LONGER ACTION")                                             //Mandatory
    this.snackBarModel4.setButtonTextColor("#ECD540")
}

//Passing Customized/Non-customized object to MaterialSnackBar
MaterialSnackBar({
          obj : this.snackBarModel4,
          func : this.SnackButtonAction
        })

Compatibility

Supports OpenHarmony API version 9

Reference:

Design by : Pranav Singh