- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试使用 Angular Material 和 flex css 在 Angular 2 中创建一个简单的布局..
<div class="background" >
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between none" >
<div fxLayout="column" >
<p>SPACE STUDY</p>
<h6>Rockefeller FY 2018</h6>
<div fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none">
<h6 [matMenuTriggerFor]="dashboarditems">
<mat-icon style="transform: scale(1.2);">line_weight</mat-icon> </h6>
<mat-menu class="mat-menu-panel" [overlapTrigger]="true" #dashboarditems="matMenu"><br/><br/>
<a routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></a><br/><br/><br/>
<a >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></a><br/><br/><br/>
<a >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></a><br/><br/><br/>
<a >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></a><br/><br/><br/>
<a >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></a><br/><br/><br/>
<a >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></a><br/><br/><br/>
</mat-menu>
</div>
</div>
<div fxLayout="row" fxShow="true" fxHide.lt-md="true" >
<button mat-raised-button routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></button>
</div>
</mat-toolbar>
</div>
<style>
.background {
/* Remember to use the other versions for IE 10 and older browsers! */
display: flex;
min-height: 100%;
font-family: 'verdana', sans-serif;
color: #fff;
height:100vh;
background: #222222;
background: #16222A; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #16222A , #3A6073); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #16222A , #3A6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
p{
font-size:20px;
font-weight:bold;
font-family: 'verdana', sans-serif;
margin:3px;
}
h6{
font-size:12px;
font-weight:bold;
font-family: 'verdana', sans-serif;
}
.mat-raised-button{
text-align:left;
border-radius:10px;
font-size:11px;
font-weight:bold;
font-family: 'verdana', sans-serif;
color:white;
background:transparent;
}
.mat-icon {
transform: scale(1.5);
}
.matTooltip{
font-size:11px;
font-weight:bold;
font-family: 'verdana', sans-serif;
}
.mat-menu-panel {
min-width: 35px;
max-width: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
border-radius: 2px;
outline: 0;
background: transparent;
padding-left: 10px;
}
</style>
这里我尝试将 mat-menu 容器的背景颜色更改为透明,并设置一些其他样式。
当我在控制台中更改时,它会反射(reflect)回来,如下所示
但是当我在我的代码中应用相同的更改时,没有应用样式。
我还尝试在组件和添加垫菜单的 div 中显式添加 class="mat-menu-panel"。
但仍然没有应用样式..
谁能帮我修改这个样式..
最佳答案
样式未应用,因为 Angular view encapsulation .
你可以在这里看到你的 .mat-menu-panel
被封装:
关闭 View 封装:
将 encapsulation
组件属性设置为 ViewEncapsulation.None
,如下所示:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
encapsulation: ViewEncapsulation.None, // disable ViewEncapsulation
})
或者把mat-menu-panel样式放在全局样式上:/styles.scss
(将“很快”弃用)使用 ::ng-deep
,如本帖所述:how-to-turn-off-view-encapsulation-for-one-property-in-angular-2
您的某些属性会被默认样式覆盖,因此您必须为每个属性添加 !important
或使用更具体的选择器。
例如,我将 myMenu
类添加到您的 mat-menu
中:
然后,将 css 选择器更新为:
.mat-menu-panel.myMenu {
min-width: 35px;
max-width: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
border-radius: 2px;
outline: 0;
background: transparent;
padding-left: 10px !important;
}
关于angular - 使用 Angular Material 和 flex css 的垫子菜单样式不能以 Angular 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50023546/
我是 javascript 的新手(今天开始弄乱它)。 我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。 我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常,除了条形
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误,但是当我运行时, gua
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
我在使用 dup2() 和 pipe() 时遇到问题。 当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时,我收到了 EBADF。 我用 gdb 在 dup2(pout[1], ST
首先,我应该说我运行的是 Windows 7。 因此,今天早上我尝试像往常一样从我的存储库中提取数据,但我做不到。我得到了错误: The authenticity of host 'github.co
刚开始在虚拟环境中运行Python,乱用Django,无法激活虚拟环境。 花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv),但没有成功。 避免使用“sudo pip inst
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如,与数据框不同,小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。 不
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知,我已经创建了一个完整且有效的 Docker 文件……但它不起作用。 我会解释的。 所以我的脚本在 3 个文件中运行。 首先是启动
我可以在 Controller 中使用@Autowired,例如 @RestController public class Index { @Autowired HttpServlet
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。 我的问
当我控制台单独记录变量“pokemons”时,它确实返回一个数组。但是当我尝试映射它时,出现错误: TypeError: pokemons.map is not a function 我的代码: im
每当我尝试在 Python 解释器中导入 smtplib 时,都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题? 编辑:这是完整
我正在使用 Meteor.js 开发一个项目,但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项,并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
你好,我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中 和 我的 Controller 类是 @Controller pub
我试图在 mainwindow.cpp 中包含 QtSvg,但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
鉴于以下 PostgreSQL 代码,我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。 请注意:这个查询显然非常
我是一名优秀的程序员,十分优秀!