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

Question

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

<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)。尽管材料设计规范允许底部抽屉 (here)。

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

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