Author: | koddr |
---|---|
Views Total: | 169 views |
Official Page: | Go to website |
Last Update: | August 5, 2021 |
License: | MIT |
Preview:

Description:
An awesome confirmation interaction concept that enables the user to confirm an action by clicking and holding on a confirm button.
See It In Action:
How to use it:
1. Install the sweetconfirm.js package.
# NPM $ npm install sweetconfirm.js --save
2. Import the sweetconfirm.js.
// as an ES module import { SweetConfirm } from "sweetconfirm.js";
<!-- OR --> <script src="./sweetconfirm.min.js"></script>
3. Create a confirmation button on the page.
<button id="button">? Push the button!</button>
4. Enable the SweetConfirm on the button and perform an action after confirmation.
var button = document.getElementById("button"); function SendMessage(element, message) { document.getElementById(element).innerHTML = message; console.log("This is fake data!", "Green button is disabled now."); } new SweetConfirm(button, () => { SendMessage( "message", "OK! Fake data was sent to console.<br/>Refresh page for try again!" ); });
5. Customize the confirmation button.
var button = document.getElementById("button"); function SendMessage(element, message) { document.getElementById(element).innerHTML = message; console.log("This is fake data!", "Green button is disabled now."); } new SweetConfirm(button, () => { SendMessage( "message", "OK! Fake data was sent to console.<br/>Refresh page for try again!" ); },{ bg: "#0f4c81", bgSize: "215% 100%", bgPositionIn: "right bottom", bgPositionOut: "left bottom", trans: { init: true, in: 0.5, out: 0.5, }, gradient: { deg: "135deg", from_color: "#0f4c81 50%", to_color: "#fa7268 50%" }, question: "? Are you sure?", success: { message: "? Success!", color: "#00b16a" }, timeout: 3000 });
Changelog:
v0.4.1 (08/05/2021)
- Update dependencies
v0.4.0 (07/30/2021)
- Improved release
01/03/2019
- Refactoring