Angular 角材质-如何创建浮动卡&x2B;工具栏布局
如何创建具有浮动工具栏和卡片布局的工具栏,如下图所示 这是从官方材料网站上拍摄的Angular 角材质-如何创建浮动卡&x2B;工具栏布局,angular,angular-material2,Angular,Angular Material2,如何创建具有浮动工具栏和卡片布局的工具栏,如下图所示 这是从官方材料网站上拍摄的 <div id="profile-edit"> <mat-toolbar color="primary"> <span>Outer Toolbar</span> <mat-toolbar-row> </mat-toolbar-row> <mat-toolba
<div id="profile-edit">
<mat-toolbar color="primary">
<span>Outer Toolbar</span>
<mat-toolbar-row>
</mat-toolbar-row>
<mat-toolbar-row>
</mat-toolbar-row>
</mat-toolbar>
<mat-card class="example-card">
<mat-toolbar>
<span>Inner Card Toolbar</span>
</mat-toolbar>
</mat-card>
</div>
外部工具栏
内部卡工具栏
这就是我到目前为止所做的,我创建了一个外部工具栏,其中有两行用来增加高度
我不知道如何浮动页面的卡片中心和工具栏的中心。对于页眉,请尝试此操作
<mat-toolbar color="primary">
<button mat-icon-button><mat-icon>menu</mat-icon></button>
<mat-toolbar-row></mat-toolbar-row>
<mat-toolbar-row></mat-toolbar-row>
</mat-toolbar>
好的。。。显然,没有更多的细节或复制,我真的无法帮助。它显示像H1,然后我把它改为一个简单的,现在它看起来不错!谢谢
<mat-card class="card">
<mat-card-header class="header">
<div class="subheading-2 title">Title</div>
<div class="header-actions">
<button mat-icon-button><mat-icon>search</mat-icon></button>
<button mat-icon-button><mat-icon>view_module</mat-icon></button>
<button mat-icon-button><mat-icon>more_vertical</mat-icon></button>
</div>
</mat-card-header>
<mat-card-content class="content">
<!-- Insert content here -->
</mat-card-content>
</mat-card>
$header-height: 64px;
.card {
padding: 0;
margin: -$header-height auto 0;
width: 75%;
}
.header {
display: flex;
align-items: center;
height: $header-height;
box-sizing: border-box;
border-bottom: solid 1px rgba(0,0,0,0.12);
color: rgba(0,0,0,0.6);
.title {
margin-right: auto;
font-weight: 400;
}
}
.content {
height: 400px;
}