[转]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 ...
随机推荐
- tensorflow nan
https://github.com/tensorflow/tensorflow/issues/3212 NaNs usually indicate something wrong with your ...
- PowerShell工作流学习-4-工作流中重启计算机
关键点: a)工作流中重新启动计算机,请使用Restart-Computer的Wait参数,Wait参数不仅适用于本地计算机,也适用于远程计算机. b)重启运行工作流的计算机,手工恢复请使用Resum ...
- mysql数据库到底是什么?!
MySql是MySql.AB公司开发的,采用客户/服务器模型的开放源码关系型SQL数据库管理系统,它可以在多种操作系统上运行. 客户端/服务器:C/S.需要给不同系统安装不同的软件,是专用的协议,比较 ...
- Makefile入门
相信大家对makefile都不陌生,在Linux下编写程序基本都离不开makefile的编写,我们都知道多个.c文件经过编译器编译后得到多个.o文件,这些文件是互相独立的,但最终我们要得到一个可正常运 ...
- log4j学习(二) 不要用log4j了,用slf4j + logback吧
标题比较尴尬,log4j学习系列的最后一篇是放弃log4j - -! 一. 简介 log4j的作者提出了slf4j,简单日志门面,相当于是一套统一的java日志api,是个接口标准,编程时使用 ...
- 2019-4-22 linux学习
linux 一.linux的目录结构 / 挂载目录:为所有目录的根目录 home 家目录: 用户的根目录 存放普通用户的文件 例如:创建一个jack用户,就会产生一个Jack ...
- uboot处理dtb
目录 uboot处理dtb 传递参数给内核 dtb 地址选择 dtb修改 移植fdt title: uboot处理dtb date: 2019/4/28 17:18:19 toc: true --- ...
- Two strings 的另一种解法
Two strings 的另一种解法 论文中的解法是离线插入 \(O(\log n)\) 询问 \(O(\log n)\) 的,不过我发现有一种离线插入 \(O(1)\) 询问 \(O(\log n) ...
- python 使用 sorted 对 列表嵌套元组的数据进行排序
在开发的过程可能会遇到这么一个需求,存在一个列表嵌套元组的数据: data = [(1, 'a'),(2, 'b'),(5, 'c'),(3, 'd'),(4, 'e')] 需要将这个列表按照元组的第 ...
- 利用nodejs安装并运行express的三个坑
概述 这是我安装并运行express的三个坑,应该是比较常见的,在此记录一下. 内容 express不是内部或外部命令 输入命令:express -V 报错:'express' 不是内部或外部命令,也 ...