角度材质 - 如何创建浮动卡片+工具栏布局

Question

如何创建具有浮动工具栏和卡片布局的工具栏，如下图所示。

https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7bW1TYXlMT0JxUWM/layout-structure-toolbars4.png

这是来自官方网站的材料取。

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

这就是我到目前为止创建的一个带2行的外部工具栏以增加高度。

我不知道如何漂浮页面中心和工具栏中心。

Answer 1

对于头，试试这个

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

对于卡，

<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; 
} 

STACKBLITZ EXAMPLE