Create your alert messages with fvuarJS!
Fvuar.new({
text: "This is alert without taking advantage of fvuarJS.",
})Paste these codes into the terminal where you are sure you are in your project directory. It will include the latest version of fvuarjs as a package for you in your project. or yarn add fvuarjs
npm install fvuarjs@latest<script src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/fvuar.min.js"></script>import { Fvuar } from 'fvuarjs';
const App = () => {
Fvuar.configure({
MAXTIME: 10
})
const showAlert = () => {
Fvuar.new({
theme: "success",
position: "top-right",
text: "This is a message of success!",
time: 10, // time
css: { backgroundColor: 'lightgreen', color: 'darkgreen' }, // If you don't like our theme, you can add your own css rules, most css rules are available.
clickToClose: true
});
};
return (
<div>
<button onClick={showAlert}>Show Alert</button>
</div>
);
};
export default App;<!DOCTYPE html>
<html lang="en">
<head>
<!-- include css file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/styles/fvuar.min.css" />
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<!-- include js file -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.5/fvuar.min.js"></script>
<script>
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
Fvuar.new({
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fvuarjs@0.0.4/fvuar.min.js"></script>
<script>
const fv = new Fvuar();
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
fv.copy(copyBtn, true, {
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html>| Methods | Parameters | Details |
|---|---|---|
configure() |
MAXCOUNT, MAXTIME, DEFAULTTIME, DEFAULTTHEME, DEFAULTPOSITION, CPALERT, ALERTOFFSET, CLOSEMETHOD, HOVERTOTOP, CLICKTOCLOSE, MULTIPLY
|
- MAXCOUNT: Determine the maximum number of alerts to be shown on the page. --default value: 4 - MAXTIME: Set the maximum time that alerts will remain on the screen. --default value: 4 - DEFAULTTIME: Determine the time that alerts will remain on the screen, --default value: 4 - DEFAULTTHEME: It determines the default theme of the alerts on the screen, --default value: "default" - DEFAULTPOSITION: It determines the default location of alerts on the screen, --default value: "top-right" - CPALERT: It takes two values: true or false, if true, the copy function also calls alert. If false, it does not call. --default value: false - ALERTOFFSET: You set the distance between alerts (in px) --default value: 70 - CLOSEMETHOD: How to turn off alerts? you specify. The value you give will be processed as an event in addEventListener. --default value: "click" - HOVERTOTOP: When alerts overlap, the bottom one may not be visible. To fix this situation, set this value to true. This setting highlights the alert you hover over. --default value: false - CLICKTOCLOSE: If you want alerts to close when clicked before they expire, set this property to true. --default value: true - MULTIPLY: If you want to prevent the old alert from disappearing every time you request a new alert. If you do not want this setting? Set it to true. Is this setting the same on the screen? Allows more than one alert to appear at a time. --default value: false - |
new() |
theme, position, text, displayTime, css, clickToClose
|
- theme: You can determine the theme of your alert by choosing one of the following types: success, default, error, orange, info, warning. --default value : "default" - text: The articles you want to appear in the alert will be located here. --default value : "Your Alert is here!" - position: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right --default value : "top-right" - displayTime: You can specify the survival time of your alert (the value in seconds you enter, after which the alert will disappear). --default value: 4 - css: You can change the alert CSS rules you don't like according to your needs. It supports all javascript style reference features. --default value : none. - clickToClose: If you want alerts to close when clicked before they expire, set this property to true. --default value: true |
copy() |
target, alert, alertOptions |
- target: If you give the target itself or its id, the copy() function copies the text in that targeted element for you. --default value : none - alert: If you want to show alert, set true here. See the next parameter to change alert settings. --default value: false - alertOptions: To access here, you must provide true in the previous parameter. It is the parameter where you can set alerts. It takes an object and supports all new() function parameters. --default value: new() function parameters |
- [x] minify-js should release its compressed version.
- [x] A piece of code will be added that will allow the user to change the warning message location according to his needs.
- [x] While you can select the copy() function with its id, now you can make a selection with its id, its class and itself.
- [ ] Color codes will be rearranged according to dark and light themes.
- [ ] A code will be added so that the user can change the color of the text on the alert to the color he/she chooses.
- [ ] A piece of code will be added where the user can change the font size as he wishes.
- [ ] There will be a restriction on the maximum value of the text on the Alert close button.
- [ ] An animation will be added to Alert's existence and disappearance using css.