[转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container
本文转自:https://blog.csdn.net/qq_24078843/article/details/78560556
引用 material dialog 方法 官方文档
自定义弹框内容后的结果
dialog html
<div style="background-color: #4eaee1">
我是内容
</div>
啊嘞,奇怪了,我并没哟设置 padding值,但是却有padding
- 查看material dialog 组件源码(dialog.es5.js),看看发现了啥
MatDialogContainer.decorators = [
{ type: Component, args: [{selector: 'mat-dialog-container',
template: "<ng-template cdkPortalHost></ng-template>",
styles: [".mat-dialog-container{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:block;padding:24px;border-radius:2px;"],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
那啥从源码发现了dialog的容器布局中添加 .mat-dialog-container padding:24px
所以dialog布局造成有边距
- 方案 自定义样式
/deep/.mat-dialog-container {
padding: 0px;
}
注意点 class名和组件里相同,前面加 /deep/,大概意思是会深入组件内对有该class的组件设置样式,这样会覆盖组件内的 padding
结果
举一反三:那么若是在angular中引入其他第三方组件,但又不想用它的样式则可以通过这样的方案去改变它的样式
MatDialog 其他属性设置探索
{
width: '250px', //宽
height: '100px', //高
position: {top: '30px'}, //距离浏览器上边距(top,bottom,left,right)
disableClose: true, //点击对话框外不消失
// hasBackdrop: true,
// backdropClass: `btn-default`,
// panelClass: `btn-default`,
data: { content: response.msg} //往对话框里传参数
}
主要属性设置可以看源码中的 dialog-config.d.ts 文件
--------------------- 本文来自 遗忘了的自己 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/qq_24078843/article/details/78560556?utm_source=copy
[转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container的更多相关文章
- android继承Dialog实现自定义对话框
有时需要自定义对话框,可以使用AlterDialog.Bulider,比如下面的代码片段 new AlertDialog.Builder(self) .setTitle("标题") ...
- 关于JFace的自定义对话框(Dialog类)
仅仅是使用MessageDialog,InputDialog等JFace中现成的对话框类是无法满足实际项目开发需要的. 很多时候都需要自己定制对话框,自定义对话框只要在Dialog类的基础上作扩展就行 ...
- 自定义对话框(jDialog)
[配置项]jDialog options点击收起 一.接口功能 jDialog的默认配置项,本组件提供的所有对话框,都可以通过修改这些配置项来实现不同的效果. 二.详细配置项 /** * 对话框的默认 ...
- Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
目录 一.提示信息对话框: 二.单选对话框: 三.多选对话框: 四.自定义对话框: 演示项目完整代码: 一.提示信息对话框: //显示提示消息对话框 private void showMsgDialo ...
- 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件
多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
- Android项目实战(七):Dialog主题Activity实现自定义对话框效果
想必大家都用过Dialog主题的Activity吧,用它来显示自定义对话框效果绝对是一个非常不错的选择. 即把activity交互界面以Dialog的形式展现出来,Dialog主题的Activity大 ...
- Android自定义Dialog多选对话框(Dialog+Listview+CheckBox)
先放效果截图 项目中需要有个Dialog全选对话框,点击全选全部选中,取消全选全部取消.下午查了些资料,重写了一下Dialog对话框.把代码放出来. public class MainActivity ...
- ProgressWheelDialogUtil【ProgressWheel Material样式进度条对话框】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单封装网络请求时的加载对话框以及上传.下载文件的进度加载对话框. 效果图 代码分析 ProgressWheel : 自定义view ...
随机推荐
- POI SXSSFWorkbook 读取模板 存在公式解决
package com.baoqilai.base.service.export; import java.io.File; import java.io.FileInputStream; impor ...
- JavaScript基础视频教程总结(031-040章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- tab下图片要求
下面是每个tab的属性: 属性 类型 必填 说明 pagePath String 是 页面路径,必须在pages中先定义 text String 是 tab上按钮文字 iconPath String ...
- Nginx Redirect Websocket
I want to redirect my websocket to another server. As we known, nginx command rewrite or redirect ca ...
- req、js
requests库中,可不写为headers内各键值对的部分参数: s=requests.Session() #或.session() s.allow_redirects=False #禁止重定 ...
- google guava Multimap的学习介绍
1.https://blog.csdn.net/gongxinju/article/details/53634434
- TensorFlow 神经网络教程
TensorFlow 是一个用于机器学习应用程序的开源库.它是谷歌大脑的第二代系统,在取代了近源的 DistBelief 之后,被谷歌用于研究和生产应用.TensorFlow 提供了很多种语言接口,包 ...
- python中使用for循环,while循环,一条命令打印99乘法表
用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10): for j in range(1,10): print(j,"x& ...
- Windows 10安装Python 3 7成功打印Hello World!
Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:https://www.python.org/ 你可以在以下链接中下载 Python ...
- Python--Click
Click Click 是 Flask 的开发团队 Pallets 的另一款开源项目,它是用于快速创建命令行的第三方模块. 我们知道,Python 内置了一个 Argparse 的标准库用于创建命令行 ...