我想让图标位于标题和内容部分之间
但它继续在标题部分下..
这是我得到的结果:
我的html代码
<ion-header >
<ion-toolbar class="header">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="app-title" text-center>My app</ion-title>
</ion-toolbar>
<ion-toolbar class="header">
<ion-row>
<ion-col text-center routerLink="/mails-to-sign">
<p class="stat-title">Courriers à signer</p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/action">
<p class="stat-title"> Actions à réaliser </p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/refused-mails"></p>
<p class="stat-title">Courriers transmit</p>
</ion-col>
</ion-row>
</ion-toolbar>
<ion-content>
<ion-icon class="add-mail-btn" color="success" name="add-circle"></ion-icon>
</ion-content>
我的CSS
.add-mail-btn{
font-size: 60px;
position: absolute;
top: -5%;
left: 79%;
}
最佳答案
您似乎正在寻找 ion-fab 组件:
<ion-content>
<!--
fab placed to the top and end and on the top edge
of the content overlapping header
-->
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button>
<ion-icon name="person"></ion-icon>
</ion-fab-button>
</ion-fab>
...
</ion-content>
请注意,按钮的位置是通过使用以下properties来实现的:垂直=“顶部”水平=“结束”边缘
关于javascript - 如何使 ionic 元素漂浮在 ionic 头上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56635718/