架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 7931|回复: 0

[Angular] Angular6 Material2 封装alert消息提示框

[复制链接]
发表于 2018-11-22 15:00:49 | 显示全部楼层 |阅读模式
Angular Material

Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

据谷歌介绍,Material Design基于“真实的触感,灵感源自对纸和墨水的研究,” 能够让用户 “理解那些用于替代真实世界的可视线索”,“而又不违背力学原理”。另外,光线、表面和移动的基本原理是表现对象如何移动、交互和相互关联地存在于空间中的关键。逼真的光影效果可以显示区块间的接缝、划分空间、以及标识移动的部件。更多详细的介绍可以看 Material 的官网 https://material.io

而 Angular Material 则是由 Angular 团队完全基于 Material 规范,完美实现的一套 Angular2+ UI框架,官网地址:https://material.angular.io

本文用Angular Material 的MatSnackBar组件来封装一个alert提示框服务,先上效果图:

alert.gif

第一步:安装

QQ截图20181030134620.jpg

第二步:配置动画

安装动画包后,导入BrowserAnimationsModule到您的应用程序中以启用动画支持。

app.module.ts导入如下:

第三步:导入主题

包含主题是将所有核心和主题样式应用于您的应用程序所必需的。

要开始使用预先构建的主题,请在应用程序中全局包含Angular Material的预构建主题之一。如果您使用的是Angular CLI,可以将其添加到styles.scss

如果您没有使用Angular CLI,则可以通过<link>您的元素包含预构建的主题index.html。

第四步:开始封装alert提示框

通过cmd命令cd 进入/app/services目录,目录可以根据自己的项目进行修改,执行创建服务命令:

ts代码如下:


第五步:配置提示框css样式

在项目的styles.scss文件最下面,添加如下样式,可以根据自己实际情况进行修改!代码如下:

第六步:使用alert提示框

我以登录界面为例子,在login.module.ts导入alert服务MatSnackBarModule组件模块,如下:

在login.component.ts组件里面使用,代码如下:

MatSnackBar组件api文档:https://material.angular.io/components/snack-bar/overview

(完)

评分

参与人数 1MB +1 贡献 +1 收起 理由
kil + 1 + 1 对我帮助很大

查看全部评分





上一篇:Jekins 如何部署.net framework项目
下一篇:【演讲课程】在清华听演讲
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-29 13:36

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表