本文转自:https://blog.csdn.net/qq_24078843/article/details/78560556

版权声明:本文为博主原创文章,未经博主允许不得转载。 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的更多相关文章

  1. android继承Dialog实现自定义对话框

    有时需要自定义对话框,可以使用AlterDialog.Bulider,比如下面的代码片段 new AlertDialog.Builder(self) .setTitle("标题") ...

  2. 关于JFace的自定义对话框(Dialog类)

    仅仅是使用MessageDialog,InputDialog等JFace中现成的对话框类是无法满足实际项目开发需要的. 很多时候都需要自己定制对话框,自定义对话框只要在Dialog类的基础上作扩展就行 ...

  3. 自定义对话框(jDialog)

    [配置项]jDialog options点击收起 一.接口功能 jDialog的默认配置项,本组件提供的所有对话框,都可以通过修改这些配置项来实现不同的效果. 二.详细配置项 /** * 对话框的默认 ...

  4. Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)

    目录 一.提示信息对话框: 二.单选对话框: 三.多选对话框: 四.自定义对话框: 演示项目完整代码: 一.提示信息对话框: //显示提示消息对话框 private void showMsgDialo ...

  5. 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

    多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...

  6. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

  7. Android项目实战(七):Dialog主题Activity实现自定义对话框效果

    想必大家都用过Dialog主题的Activity吧,用它来显示自定义对话框效果绝对是一个非常不错的选择. 即把activity交互界面以Dialog的形式展现出来,Dialog主题的Activity大 ...

  8. Android自定义Dialog多选对话框(Dialog+Listview+CheckBox)

    先放效果截图 项目中需要有个Dialog全选对话框,点击全选全部选中,取消全选全部取消.下午查了些资料,重写了一下Dialog对话框.把代码放出来. public class MainActivity ...

  9. ProgressWheelDialogUtil【ProgressWheel Material样式进度条对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单封装网络请求时的加载对话框以及上传.下载文件的进度加载对话框. 效果图 代码分析 ProgressWheel : 自定义view ...

随机推荐

  1. POI SXSSFWorkbook 读取模板 存在公式解决

    package com.baoqilai.base.service.export; import java.io.File; import java.io.FileInputStream; impor ...

  2. JavaScript基础视频教程总结(031-040章)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. tab下图片要求

    下面是每个tab的属性: 属性 类型 必填 说明 pagePath String 是 页面路径,必须在pages中先定义 text String 是 tab上按钮文字 iconPath String ...

  4. Nginx Redirect Websocket

    I want to redirect my websocket to another server. As we known, nginx command rewrite or redirect ca ...

  5. req、js

    requests库中,可不写为headers内各键值对的部分参数:   s=requests.Session()  #或.session() s.allow_redirects=False #禁止重定 ...

  6. google guava Multimap的学习介绍

    1.https://blog.csdn.net/gongxinju/article/details/53634434

  7. TensorFlow 神经网络教程

    TensorFlow 是一个用于机器学习应用程序的开源库.它是谷歌大脑的第二代系统,在取代了近源的 DistBelief 之后,被谷歌用于研究和生产应用.TensorFlow 提供了很多种语言接口,包 ...

  8. 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& ...

  9. Windows 10安装Python 3 7成功打印Hello World!

    Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:https://www.python.org/ 你可以在以下链接中下载 Python ...

  10. Python--Click

    Click Click 是 Flask 的开发团队 Pallets 的另一款开源项目,它是用于快速创建命令行的第三方模块. 我们知道,Python 内置了一个 Argparse 的标准库用于创建命令行 ...