# MaterialSnackbar

**Repository Path**: applibgroup/MaterialSnackbar

## Basic Information

- **Project Name**: MaterialSnackbar
- **Description**: This is a material design component in harmony system， if you want create a beautiful page ,just try it!
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-12
- **Last Updated**: 2022-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Material_UI_Component_Snackbar
Material component Snackbar design in OpenHarmony.

Introduction
Material component Snackbar design in OpenHarmony provide material UI designed component for Snackbar. These library can be used to add Material UI designed Snackbar component in applications

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
        })
s11

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
        })
s22

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
        })
s33

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
        })
s44

Compatibility
Supports OpenHarmony API version 9

Reference:
Design by : Pranav Singh