我正在创建 Angular 7 应用程序并设计 UI。我想修复底部栏,如下图所示。只需要中间的圆形图标留下其他东西。 here is the bottom bar image
最佳答案
您可以使用 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;
}
}
这应该让您朝着正确的方向开始。
关于html - 如何使用 Angular Material 或 Angular 制作图像中给出的底部栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58327919/