在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:t4t5/sweetalert开源软件地址:https://github.com/t4t5/sweetalert开源编程语言:TypeScript 49.6%开源软件介绍:A beautiful replacement for JavaScript's "alert" Installation$ npm install --save sweetalert Usageimport swal from 'sweetalert';
swal("Hello world!"); Upgrading from 1.XMany improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the upgrade guide to avoid nasty surprises! GuidesDocumentationExamplesAn error message:swal("Oops!", "Something went wrong!", "error"); A warning message, with a function attached to the confirm message:
swal({
title: "Are you sure?",
text: "Are you sure that you want to leave this page?",
icon: "warning",
dangerMode: true,
})
.then(willDelete => {
if (willDelete) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
}
});
const willDelete = await swal({
title: "Are you sure?",
text: "Are you sure that you want to delete this file?",
icon: "warning",
dangerMode: true,
});
if (willDelete) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} A prompt modal, where the user's input is logged:
swal("Type something:", {
content: "input",
})
.then((value) => {
swal(`You typed: ${value}`);
});
const value = await swal("Type something:", {
content: "input",
});
swal(`You typed: ${value}`); In combination with Fetch:
swal({
text: "Wanna log some information about Bulbasaur?",
button: {
text: "Search!",
closeModal: false,
},
})
.then(willSearch => {
if (willSearch) {
return fetch("http://pokeapi.co/api/v2/pokemon/1");
}
})
.then(result => result.json())
.then(json => console.log(json))
.catch(err => {
swal("Oops!", "Seems like we couldn't fetch the info", "error");
});
const willSearch = await swal({
text: "Wanna log some information about Bulbasaur?",
button: {
text: "Search!",
closeModal: false,
},
});
if (willSearch) {
try {
const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
const json = await result.json();
console.log(json);
} catch (err) {
swal("Oops!", "Seems like we couldn't fetch the info", "error");
}
} Using with ReactSweetAlert has tools for integrating with your favourite rendering library.. If you're using React, you can install SweetAlert with React in addition to the main library, and easily add React components to your alerts like this: import React from 'react'
import swal from '@sweetalert/with-react'
swal(
<div>
<h1>Hello world!</h1>
<p>
This is now rendered with JSX!
</p>
</div>
) Read more about integrating with React ContributingIf you're changing the core library:
If you're changing the documentation:
ContributorsThis project exists thanks to all the people who contribute. [Contribute]. BackersThank you to all our backers! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论