时间戳

首页 > 解决方案 > 角度材料如何定位 mat-sidenav 顶部或底部

angular-material - 角度材料如何定位 mat-sidenav 顶部或底部

问题描述

我是角度材料的新手。从角度材料文档我可以看到它可以定位为“开始”或“结束”。

<div style="border:solid 1px red;">
    <mat-sidenav-container>
        <mat-sidenav class="sidenav"
                     position="end" <!-- want to position top or bottom here-->
                     [opened]="sidenavOption.open"
                     [mode]="sidenavOption.mode">
            Sidenav content
        </mat-sidenav>
        <ng-content></ng-content>
    </mat-sidenav-container>
</div>

我想定位“顶部”或“底部”

谁能帮助我如何做到这一点？

谢谢

标签： angular-materialangular6

解决方案

顾名思义，AFAIK sidenav 只能出现在页面的右侧 ( end) 或左侧 ( start)。即使材料设计规范允许底部抽屉（此处）。

如此处所述，除了 position 之外，没有其他属性可以指定 left 或 right 以外的位置。

似乎您要么需要自己实现这样的抽屉 - 但为此你可以从材料设计类扩展并在它们之上构建 - 或者你可以使用MatBottomSheet，它几乎相同，但只能是用作一种底部抽屉。

推荐阅读