cordova 将离子晶圆厂按钮置于离子脚上方

dxpyg8gm  于 2022-11-15  发布在  其他
关注(0)|答案(1)|浏览(155)

我希望我的ion-fab按钮位于页脚的正上方。有什么好的方法可以做到这一点吗?我的页面的一般设置如下:

<ion-header></ion-header>
<ion-content>
     <ion-fab bottom right></ion-fab>
</ion-content>
<ion-footer></ion-footer>

有css样式我可以用来得到fab按钮的权利上方的页脚?

kognpnkq

kognpnkq1#

下面是关于CSS位置属性的教程:https://www.w3schools.com/Css/css_positioning.asp
您也可以使用@media来根据屏幕大小使用不同的值。例如:
HTML:

<ion-fab slot="fixed" class="btm">
    <ion-fab-button>Button</ion-fab-button>
</ion-fab>

CSS:

@media(min-width: 768px)
{
  ion-fab.btm
  {
    position: absolute;
    margin-top: 72vh;
    margin-left: 97vw;
  }
}

@media(max-width: 768px)
{
  ion-fab.btm
  {
    position: absolute;
    margin-top: 72vh;
    margin-left: 82vw;
  }
}

备选方案:

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
   <ion-fab-button>
   </ion-fab-button>
</ion-fab>

相关问题