当前位置:主页 > JavsScript库 > 通知 / 提示 >

Material Design 漂亮的对话框库 - SoloAlert
栏目分类:通知 / 提示   发布日期:2021-08-31   浏览次数:

SoloAlert 是一个 JavaScript 库,用于创建响应式、漂亮的弹出框(如警报、确认和提示对话框),如在 Google Android(Material Design)上看到的。

使用:

1. 使用 NPM 安装和下载软件包。

# NPM 
$ npm i soloalert --save

2. 将 SoloAlert 库插入到文档中。

<script src="index.js"></script>

3. 创建警报对话框。

SoloAlert.alert({ 
 
  // 标题
  title: "Title", 
 
  // 内容
  body: "", 
 
  // success, warning, 或, error
  icon:"", 
 
  // 或 "light", "dark" 
  theme: "auto", 
 
  // 附加 HTML 内容
  html: "", 
 
  // 背景背景是否半透明
  useTransparency: false, 
 
  // 回调函数
  onOk: function () { }, 
   
});

4. 创建一个确认对话框。

SoloAlert.confirm({
 
  // 标题
  title: "Title",
 
  // 内容
  body: "",
 
  // 或 "light", "dark"
  theme: "auto",
 
  // 附加 HTML 内容
  html: "",
 
  // 背景背景是否半透明
  useTransparency: false,
 
  // 回调函数
  onOk: function () { },
  onCancel: function () { },
 
}).then(value => {
  // 做些事情
})

5. 创建提示对话框。

SoloAlert.prompt({ 
 
  // 标题
  title: "Title", 
 
  // 内容
  body: "", 
 
  // 最大字符数
  textLimit: 100, 
 
  // 或 "light", "dark" 
  theme: "auto", 
 
  // 附加 HTML 内容
  html: "", 
 
  // 背景背景是否半透明
  useTransparency: false, 
 
  // 回调函数
  onOk: function () { }, 
  onCancel: function () { }, 
  onInput: function () { }, 
 
})

官方网站:https://soloalert.js.org/

相关热词: SoloAlert对话框库

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库