如何在侧面导航的边缘添加新的“按钮”答案

【问题标题】：How can I add the new “Button” at the edge of side nav如何在侧面导航的边缘添加新的“按钮”
【发布时间】：2018-08-12 10:41:46
【问题描述】：

将按钮放在 sidenav 边缘的最佳方式是什么？

例如这个粉红色的按钮：

在上面的例子中，这个按钮完美地放置在两个布局之间

同样，我想在网页的 sidenav 边缘添加“取消”按钮

我正在使用 angular-material 和 flex box。

HTML：

<mat-sidenav-container fxLayout="column">
  <div fxLayout="column" >
    <div fxFlex="grow">        
      <button mat-icon-button (click)="sidenav.toggle()">
          <mat-icon>menu</mat-icon>
      </button>
      <button mat-icon-button class="vertposition" (click)="sidenav.toggle()">
        <mat-icon>more_vert</mat-icon>
      </button>
     <float-button icon="add" direction="top" class="addButtonPosition">
        <float-item-button icon="person_add" content="float item 1"></float-item-button>
        <float-item-button icon="gps_fixed" content="float item 2"></float-item-button>
        <float-item-button icon="mode_edit" content="float item 3"></float-item-button>
    </float-button>
    </div>
    <div class="container">
      <div class="mainContentContainer">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
  <mat-sidenav #sidenav [mode]="over">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>clear</mat-icon>
    </button>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
</mat-sidenav-container>

CSS：

.mat-drawer-container {
  background-color: rgba(250, 250, 250, 0);
}
.container{
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.mainContentContainer{
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

.vertposition{
  position: absolute;
  right: 0;
}

.addButtonPosition{
  top: auto !important;
  right: 20px !important;
  bottom: 10px !important;
  left: auto !important;
  position: fixed !important;
}

我正在尝试用浮动操作按钮替换以下按钮并将其放在 sidenav 的边缘

<button mat-icon-button (click)="sidenav.toggle()">
  <mat-icon>clear</mat-icon>
</button>

【问题讨论】：

如果您可以分享相关代码（HTML 和 CSS），我们可以为您提供帮助。
请发布您的组件代码和您的组件 HTML 代码。另请注意，“粉色按钮”被称为浮动操作按钮，简称 FAB
感谢您关注此问题。用 HTML 和 CSS 更新了我的问题
您能找到解决问题的方法吗？
试过但没有得到解决方案

标签： css angular flexbox angular-material

【解决方案1】：

你可以用css轻松解决这个问题，我给你展示了一个抽屉，右边有一个按钮。

我的例子：

html:

<mat-drawer-container autosize>
  <mat-drawer #drawer mode="side" position="end">
    <button class="drawer-close-button">X</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </mat-drawer>
  <span>content</span>
</mat-drawer-container>

css:

.drawer-close-button{
  border-radius: 50%;
  position: absolute;
  left: -15px;
  top: 50%;
}
 ::ng-deep .mat-drawer {
  overflow: visible
}

【讨论】：