GithubHelp home page GithubHelp logo

angjelkom / cordova-plugin-snackbar Goto Github PK

View Code? Open in Web Editor NEW
9.0 3.0 7.0 704 KB

Cordova Plugin that displays a Material Design Snackbar

License: Apache License 2.0

Java 75.48% JavaScript 24.52%

cordova-plugin-snackbar's Introduction

cordova-plugin-snackbar

Changelog 2.2.0:

  • Added Ability to close the snackbar manually

NOTE:

Use cordova.plugins.snackbar.create(text, duration, button, callback); instead of the previous cordova.plugin.snackbar(text, duration, button, callback);

Use cordova.plugins.snackbar.close(callback); to close the snackbar

MAJOR UPDATE Version 2.1.4:

This Update removes the need to manually modify the AndroidManifest.xml file to modify the App theme, the plugin will do that for you.

NOTE: You need to have Cordova 6.3.1 or higher to be able to do the modification automatically

Installation

  • Add the plugin:

    cordova plugin add cordova-plugin-snackbar
    
    phonegap plugin add cordova-plugin-snackbar
    
  • Change the Main Activity theme to AppCompact (ONLY for users that use version older than Cordova 6.3.1):

Before:

android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
  <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
      <intent-filter android:label="@string/launcher_name">
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
  </activity>

After:

android:theme="@style/Theme.AppCompat.NoActionBar"
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@style/Theme.AppCompat.NoActionBar" android:windowSoftInputMode="adjustResize">
    <intent-filter android:label="@string/launcher_name">
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Usage

//Creates one snackbar at time;

cordova.plugins.snackbar.create(text, duration, button, callback);

text // String text for the Snackbar

duration  //How long to show the Snackbar
parameters: "SHORT", "LONG" and "INDEFINITE" (default, show snackbar until it's dismissed by clicking the action button)

button - String text for the Action Button

callback - Callback function for the Action Button.


//Close snackbar programatically

cordova.plugins.snackbar.close(callback);

callback - Success Callback function when the snackbar closes.

Example

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    cordova.plugins.snackbar.create('This is a indefinite snackbar text', 'INDEFINITE', "Dismiss", function(){
      console.log('Dismiss Button Clicked!');
    });


    cordova.plugins.snackbar.close(function(){
      console.log('Snackbar Closed Programmatically!');
    });
}

Supported Platforms

  • Android

Screenshot

cordova-plugin-snackbar's People

Contributors

angjelkom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

cordova-plugin-snackbar's Issues

Question: Any way to change z-index of Snackbar?

Currently trying to use the Snackbar plugin (love it!) but I'm also using the inAppBrowser. The inAppBrowser seems to overtake everything and the Snackbar is coming up behind it, so I'm unable to see or interact with it.

Calling the Snackbar before the inAppBrowser is called works like a charm, but as soon as inAppBrowser is called, goodbye Snackbar :(

Currently testing on:
Nexus 5X with Android 7.1.1
Android Emulator (Android Studio) Nexus 5X Android 7.1

ios support

Would it be possible to have IOS support for this plugin ?

app crash when i call the plugin

hello i update the plugin to 2.1.0 and i have the same issue my app crash when i call the plugin
my code
var textSnackbar = "Downloading";
var durationSnackbar = "LONG";
var buttonSnackbar = "cancel";
callBack = function()
{
//downloader.abort();
console.log("abort");
}
cordova.plugins.snackbar(textSnackbar, durationSnackbar, buttonSnackbar, callBack);
i have the same issue when i copy paste your example code

Install error

How to Solve ?

Error - Plugin error (you probably need to remove plugin files from your app): Fetching plugin "[email protected]" via npm Installing "cordova-plugin-snackbar" at "2.1.4" for android Failed to install 'cordova-plugin-snackbar':Error: Unable to graft xml at selector "/manifest/application/activity[@android:name='MainActivity']" from "/tmp/gimlet/26963800/2658080/www_android/project/AndroidManifest.xml" during config install at ConfigFile_graft_child [as graft_child] (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/cordova-common/src/ConfigChanges/ConfigFile.js:120:19) at PlatformMunger_apply_file_munge [as apply_file_munge] (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/cordova-common/src/ConfigChanges/ConfigChanges.js:86:34) at munge_helper (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/cordova-common/src/ConfigChanges/ConfigChanges.js:265:14) at PlatformMunger.add_plugin_changes (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/cordova-common/src/ConfigChanges/ConfigChanges.js:179:12) at /tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/cordova-common/src/PluginManager.js:126:25 at _fulfilled (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/q/q.js:834:54) at self.promiseDispatch.done (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/q/q.js:863:30) at Promise.promise.promiseDispatch (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/q/q.js:796:13) at /tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/q/q.js:857:14 at runSingle (/tmp/gimlet/26963800/2658080/www_android/project/cordova/node_modules/q/q.js:137:13) Unable to graft xml at selector "/manifest/application/activity[@android:name='MainActivity']" from "/tmp/gimlet/26963800/2658080/www_android/project/AndroidManifest.xml" during config install - You can fix this here

com.android.support:appcompat-v7:23.+

After adding this plugin, when I try to "cordova build android", the build fails, and I get this message:

I think it might be related to the new Android API 24, but I couldn't solve the problem.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.