2.2.6 • Published 5 years ago

quarz v2.2.6

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

quarz.js

Preview

This should give you an idea of how the package can be used.

import "quarz/lib/quarz.css";
import quarz from "quarz";

quarz.setup();

quarz.success("created user profile");

Medium Article

Article

Installation

npm install quarz

NPM Package

Demo

Web Demo

Importing

import "quarz/lib/quarz.css";
import quarz from "quarz";

Usage 🚀

Setup

You can either just call the method or pass some configuration adjustments to fit your needs.

quarz.setup();

quarz.setup({
  gravity: "bottom", // top or bottom
  position: 'left', // left or right
  x: 25, y: 25, // space from the side
  duration: 2000,
  delay: 100,
  mobile: {
    x: 20, y: 20,
    gravity: "top",
    position: "left"
  }
});
Notifications
quarz.success("created user profile");

quarz.error({
  title: "something went wrong",
  duration: 4000,
  delay: 200
});

quarz.warning({
  title: "your email had been changed",
  duration: 2000,
  delay: 50
});

quarz.info({
  title: "today is your cake day!",
  color: "#FFC6A5",
  duration: 5000,
  delay: 2000
});
Loading Indicators
// show a loading indicator
quarz.loading();
quarz.loading("#FFDEA5");
quarz.loading({ color: "#FFDEA5" });

// stop the loading indicator
quarz.stop();

Properties

Setup
PropertyDescriptionPossible or Example Values
gravitythe vertical position of the loading notifications/indicators"top", "bottom"
positionthe horizontal position of the loading notifications/indicators"left", "right"
xthe space between the left/right of the screen and the notifications/indicators25
ythe space between the top/bottom of the screen and the notifications/indicators25
Notifications
PropertyDescriptionPossible or Example Values
titlethe message displayed on the notification"string"
durationhow long the notification is supposed to be visible in milliseconds3000
delayhow long the script should wait before showing the notification in milliseconds200
colorthe color you want to override the original color (which is defined by the type) with"#FF99E3"
Loading Indicators
PropertyDescriptionPossible or Example Values
colorthe color you want to override the original color (which is defined by the type) with"#FF99E3"

License

MIT

2.2.6

5 years ago

2.2.5

5 years ago

2.2.3

5 years ago

2.2.4

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.4

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.0.2

5 years ago

2.1.3

5 years ago

2.0.1

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

1.1.23

5 years ago

1.1.22

5 years ago

1.1.21

5 years ago

1.1.20

5 years ago

1.1.19

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.10

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago