zoukankan      html  css  js  c++  java
  • [转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container

    本文转自: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 其他属性设置探索

    {
        '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 

  • 相关阅读:
    2014.5.20知识点学习:void及void指针含义的深刻解析(转载)
    2014.5.20知识点学习:void与void*(转载)
    2014.5.19知识点学习:上下文切换
    编写“全选”按钮来操作大量复选框
    排序算法(冒泡排序,选择排序,插入排序,快速排序)
    算法基础
    Git &GitHub
    flask 上下文管理 &源码剖析
    rest-framework框架的基本组件
    Django的FBV和CB
  • 原文地址:https://www.cnblogs.com/freeliver54/p/9752999.html
Copyright © 2011-2022 走看看