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

Question

我是角材料的新手。从 angular material doc 我可以看到它可以定位在“开始”或“结束”。

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

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

任何人都可以帮助我如何做到这一点？

谢谢

Answer 1

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

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

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