Angular 中的侧导航面板

Posted 2023-02-18

【中文标题】Angular 中的侧导航面板

【英文标题】：Side Nav panel in Angular

【发布时间】：2020-01-27 07:28:39

【问题描述】：

我正在尝试添加一个按钮（打开侧面板），但由于某种原因它显示在页面的左上角。我希望它出现在中间（右侧），因此当用户单击它时，面板会显示。我还希望在侧面板打开时放大页面上的当前内容，以便用户能够同时看到面板和当前内容。

你想谈什么的描述

  <div>
    <button mat-button (click)="left.open()">Field Definitions</button>
  </div>

正确的 CSS 是什么？

【参考方案1】：

我相信您正在寻找 this，这是 Angular 材料文档中提供的示例。

有几种方法可以定位 sidenav 切换按钮，您可以使用 CSS Flexbox 或将 float: right 属性添加到按钮。我会选择第一种方法结合mat-toolbar的使用。