html - 如何使用角度材料或角度制作图像中给出的底栏?
问题描述
我正在创建 Angular 7 应用程序并设计 UI。我想修复底部栏,如下图所示。只需要中间的圆形图标离开其他的东西。 这是底部栏图像
解决方案
您可以使用 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;
}
}
这应该让您朝着正确的方向开始。
推荐阅读
- azerothcore - Azerothcore sql 汇编器脚本不起作用
- wso2-am - Wso2 carbon/apimgt 开源代码下载
- c# - 如何在 asp.net core 项目中使用自己的库
- view - Drupal 8 基于节点引用查看实体引用暴露过滤器
- powerbi - 从 Rss Feed 获取数据以支持 BI
- apache-spark - 如何在点语法中转义点,例如在 get_json_object 中?
- typescript - Vue 3.0 中的事件处理变化?
- flutter - flutter:让页面导航手势与自定义手势共存
- windows - TortoiseGit 缺少仅文件的图标覆盖
- python - 如何弯曲 matplotlib 等高线图的锯齿状边缘?