如何使用角度材料或角度制作图像中给出的底栏？答案

【问题标题】：How to make bottom bar as given in image using angular material or angular?如何使用角度材料或角度制作图像中给出的底栏？
【发布时间】：2019-10-10 17:08:32
【问题描述】：

我正在创建 Angular 7 应用程序并设计 UI。我想修复底部栏，如下图所示。只需要中间的圆形图标离开其他的东西。 here is the bottom bar image

【问题讨论】：

您的实施有什么问题？
我无法在图片中制作上面给出的底栏。
你的问题是如何修复底部的栏？我认为没有人能正确理解您的问题。
您需要添加更多详细信息，请问您尝试了什么？您面临的问题在哪里？

标签： html css angular-material angular7

【解决方案1】：

您可以使用 mat-toolbar、fab-button、div 和样式制作自定义组件：

组件模板：

<div class="fab-wrapper">
  <button mat-button mat-fab>
    <mat-icon>add</mat-icon>
  </button>
</div>
<mat-toolbar color="primary">
  <ng-content></ng-content>
</mat-toolbar>

组件 SASS：

:host {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: -36px;

  .fab-wrapper {
    width: 56px;
    height: 56px;
    position: relative;
    top: 36px;
    left: calc(50% - 36px);
    padding: 8px;
    border-radius: 36px;
    background-color: white;
  }
}

这应该会让你朝着正确的方向开始。

【讨论】：

这个 css 使用了，中心圆白色底边很好，但我不想要顶边，bcoz 顶边隐藏其他 UI 部分或在中心圆上方剪切一些 UI 部分。
然后随意更改它。该示例应该为您提供足够的工作，以便您可以按照您需要的方式工作。