Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • A Toast popup plugin for Cordova apps

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 835
    Comment on it

    Hello Readers,
    This plugin allows you to show a little popup in your app. It is great way to show a non interfering notification.


    Features :

    • We can choose the direction where to show the toast (i.e Top, Bottom, Left, Right).
    • We can also choose the duration of a toast (i.e. Short or Long. Short duration is approximately 2 seconds and long is approximately 5 seconds).

    Usage :

    We can use Toast popup in following place.

    • When user create an account succesfully.
    • When adding or deleting data.
    • For battery status, specially when battery is about to die.
    • When user logged out.
    • When connection failure.

    Note: This plugin supports Android, iOS and Windows platform.


    Now first of all we need to install the following plugin through CLI:

    $ cordova plugin add cordova-plugin-x-toast

     

    Implementation :  

     

    We have two choices to show a Toast.

    • Where to show - Direction defines the Toast popup location.
    • How much time to show - Duration defines the time of showing Toast popup.

     

    We can use some pre-define methods which makes it more easy.

    • showShortTop(message) // Short duration and Top direction
    • showShortCenter(message) // Short duration and Center direction
    • showShortBottom(message) // Short duration and Bottom direction
    • showLongTop(message)  // Long duration and Top direction
    • showLongCenter(message)  // Long duration and Center direction
    • showLongBottom(message) // Long duration and Bottom direction

    For example :

    <button onclick=showToast()>Toast showShortTop</button>
    function showToast(){
        window.plugins.toast.showShortTop('Hello there!', function(a){
         console.log('toast success: ' + a)
        }, function(b){
         alert('toast error: ' + b)
        })
    }
    

     

    In the above code window.plugins.toast invokes the showShortTop method. This method shows the Toast on top with short duration. So above mentioned methods are working as same as the above example.

     

    We can add options and some styling to the Toast with showWithOptions method. 

    For example :

    window.plugins.toast.showWithOptions({
          message: "Hello Welcome",
       duration: "short", 
          position: "center", 
          styling: { 
              opacity: 0.75, // Default 0.8 
              backgroundColor: '#FF0000',// Default #333333 
              textColor: '#FFFF00',// Default #FFFFFF 
              textSize: 20.5, // Default 13
              cornerRadius: 16, // iOS default 20, Android Default 100 and minimum is 0
          horizontalPadding: 20, // iOS default 16 and Android Default 50
              verticalPadding: 16 // iOS default 12 and Android Default 30
         } 
    });

    The styling object is optional to the plugin. With the styling object we can customize Toast popup looks.

     

    For more details Click here.

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: