2.2.6 • Published 5 years ago
quarz v2.2.6
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
Property | Description | Possible or Example Values |
---|---|---|
gravity | the vertical position of the loading notifications/indicators | "top", "bottom" |
position | the horizontal position of the loading notifications/indicators | "left", "right" |
x | the space between the left/right of the screen and the notifications/indicators | 25 |
y | the space between the top/bottom of the screen and the notifications/indicators | 25 |
Notifications
Property | Description | Possible or Example Values |
---|---|---|
title | the message displayed on the notification | "string" |
duration | how long the notification is supposed to be visible in milliseconds | 3000 |
delay | how long the script should wait before showing the notification in milliseconds | 200 |
color | the color you want to override the original color (which is defined by the type) with | "#FF99E3" |
Loading Indicators
Property | Description | Possible or Example Values |
---|---|---|
color | the 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