Android Inspired Snackbars In Vanilla JavaScript – snackbar.js

Preview:

Description:

The snackbar.js JavaScript library allows you to create Android-style snackbars of various types on the web app.

How to use it:

Install the snackbar.js.

# NPM
$ npm install vanilla-snackbar --save

Import the snackbar.js into your project.

import Snackbar from 'vanilla-snackbar';

Or import the following JavaScript file into the web page:


Create a default snackbar message which will auto dismiss after 5 seconds.

snack.message('Hello World');

Display a message that must be removed manually.

snack.stickyMessage('Acknowledge me!');

Display a message with a green background (adds class ‘success’).

snack.success('You did it!');

Display a message with a red background (adds class ‘error’).

snack.error("Something didn't work");

Display a message with an orangish/yellow background (adds class ‘warn’).

snack.warn("I'd be careful if I were you...");

Possible options. These options will be set at all time unless overridden by options passed in each call.

  • manual_close: Boolean. Provide a close X button (true) vs timed close (false)
  • time: ms of time before automatic close. (ignored if manual_close: true)
  • class: String containing desired classes.
snack.message('Hello World',{
  manual_close: false,
  time: 5000,
  class: null
});
CSS Script稿源:CSS Script (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Android Inspired Snackbars In Vanilla JavaScript – snackbar.js

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录