Question

如何使角形材料工具栏固定在页面的左上角和工具栏下方的侧面导航上方。实际上类似于Angular材质站点（https://material.angular.io/components/categories），我可以使用引导程序或自定义CSS来创建它，但我希望它是纯Angular材质，任何想法都会受到赞赏。

        <mat-sidenav-container class="container" >
            <mat-sidenav #sidenav mode="side" opened >
                <button color='primary' mat-button routerLink='/Admin'>Admins</button>
                <button color='primary' mat-button routerLink='/Manager'>Managers</button>
                <button color='primary' mat-button routerLink='/User'>Users</button>
            </mat-sidenav>
            <mat-sidenav-content>
                <mat-toolbar color='primary'>
                    <mat-toolbar-row>
                        <button mat-icon-button (click)="sidenav.toggle()">
                            <mat-icon>menu</mat-icon>
                        </button>
                        <img src="../assets/img/mLogo.svg">
                        <span class="spacer"></span>
                        <mat-icon>favorite</mat-icon>
                        <button mat-icon-button [matMenuTriggerFor]="menu">
                          <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                          <button mat-menu-item>
                            <mat-icon>publish</mat-icon>
                            <span>Share</span>
                          </button>
                          <button mat-menu-item disabled>
                            <mat-icon>mode_comment</mat-icon>
                            <span>Comment</span>
                          </button>
                          <button mat-menu-item>
                            <mat-icon>delte</mat-icon>
                            <span>Delete</span>
                          </button>
                        </mat-menu>
                    </mat-toolbar-row>
                  </mat-toolbar>

                  <router-outlet></router-outlet>
            </mat-sidenav-content>
            
          
          </mat-sidenav-container>

Answer 1

您是否尝试过类似以下关于stackblitz的解决方案： https://stackblitz.com/edit/angular-hxgufx

有一些自定义CSS，即位置固定，但是材料api不提供任何付款方式。怎么可能考虑到组件，html元素和css的无限组合。

.position-fixed{
    position: fixed
}

角材质工具栏固定顶部，从页面左下角和侧面中殿下默认打开工具栏

1 个答案: