目 录CONTENT

文章目录

snackbar弹窗的调用

米尔嘉
2022-07-28 / 0 评论 / 2 点赞 / 350 阅读 / 679 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

官方文档:https://www.polonel.com/snackbar/

Option 1 - Bower install:

$ bower install snackbar

Options 2 - NPM Install:

$ npm install node-snackbar

Option 3 - Download CSS and Javascript Files:

地址:https://github.com/polonel/snackbar/archive/master.zip

文档

官方文档:https://www.polonel.com/snackbar/

弹窗位置

可选:top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
翻译:左上/中上/右上/左下/中下/右下

Key Default 描述
text null 要在通知中拆分的文本。
textColor #FFFFFF 通知文本的文本颜色。默认值为白色。
pos bottom-left 通知将显示的位置。有关可能的位置,请参阅上面的示例。
customClass null 将自定义类添加到通知中以进行自定义样式设置。
width auto 通知的宽度。用于根据需要缩小/扩展窗口。
showAction true 布尔值来显示操作 buton 或不显示。
actionText Dismiss 要显示为操作按钮的文本。
actionTextAria Dismiss, Description for Screen Readers 屏幕阅读器的文本。
alertScreenReader false 确定屏幕阅读器是否会宣布弹窗消息。
actionTextColor #4CAF50 操作按钮的文本颜色。
backgroundColor #323232 通知窗口的背景色。
duration 5000 显示通知的时间(以毫秒为单位)。
onActionClick function(ele) 默认操作关闭通知。
onClose function(ele) 在通知已关闭时触发。

bar的调用

无操作:
Snackbar.show({ showAction: false, });
操作文本
Snackbar.show({ actionText: 'Thanks!', });
文本颜色
Snackbar.show({ actionTextColor: '#ff0000', });
单击“回调”
Snackbar.show({
   text: 'I have a custom callback when action button is clicked.',
   width: '475px',
   onActionClick: function(element) {
       //Set opacity of element to 0 to close Snackbar
       $(element).css('opacity', 0);
       alert('Clicked Called!');
   }
});
调用示例
Snackbar.show({
				actionText: '关闭',
				text: '我在人间凑数的日子',
				backgroundColor: '#9c9',
				actionTextColor: '#ffffff',
				pos: 'bottom-center',
});
主页弹窗示例
<!-- 主页弹窗开始-->
<script>
if(window.location.href == 'http://localhost:4000/'||window.location.href == 'https://minterjia.com/'){
Snackbar.show({
		actionText: '关闭',
		text: '我在人间凑数的日子!',
		backgroundColor: '#fb7299',
		actionTextColor: '#ffffff',
		pos: 'bottom-left',
});
swal("我在人间凑数的日子", "在默默承受的阶段,我们往往是处在一个独处的状态,心灵会随着环境的安静而安静,这时候,才有机会真正想到解决问题的办法!", "error");
layer.msg("我在人间凑数的日子");
Toastify({
		text: "我在人间凑数的日子",
		className: "info",
		offset:{y:'50px'},
		background: "linear-gradient(to right, #6394FD, #4E73F6)",
		position: "center",
		duration: 3000
}).showToast(); 
}
</script>
<!-- 主页弹窗结束-->
2

评论区