Question

我正在使用Ionic 4创建一个浮动动作按钮，我想使其变大。如果我给按钮上一堂课，然后转到scss文件以更改高度和宽度，则位置混乱（我在水平和垂直方向上都使用居中），它会更改大小，但使按钮START位于屏幕中心然后从那里掉下来而实际上没有居中（希望在那里有意义）

如何正确执行此操作？不幸的是，网络上的所有答案都与v4不相关

这是我的html代码：

  <ion-fab vertical="center" horizontal="center" slot="fixed">
    <ion-fab-button color="primary" [routerLink]="['/timer']" class="start-btn"><p>Start</p>
    </ion-fab-button>
  </ion-fab>

以及CSS文件的代码：

  .start-btn {
    width: 100px;
    height: 100px;
  }

我需要更改尺寸，并且位置保持在预期水平

谢谢！

Answer 1

这对我有用：

<ion-fab vertical="bottom" style="align-self: center;" slot="fixed">
  <ion-fab-button>
    <i class="iconfont ion-timer" style="margin-right: 5px;"></i>test
  </ion-fab-button>
</ion-fab>

Answer 2

您可以使用Angular样式绑定甚至动态更改 Ion Fab大小：

<ion-col> <!--parent-->
 <ion-fab #fab>
  <ion-fab-button
   [style.width]="getDiameterPx()"
   [style.height]="getDiameterPx()"

然后调整大小后，您必须重新计算并设置左上角位置（使用比率坐标x，y）

fab.nativeElement.style.left = (x -  this.fabRadius/widthOfParent) * 100 + '%';
fab.nativeElement.style.top = (y - this.fabRadius/heightOfParent) * 100 + '%';

（使用@ViewChild('fab', { read: ElementRef, static: false }) fab: ElementRef;获得元素）

父级应该有style="position: relative;"。

直径功能：

getDiameterPx() {
    return this.fabRadius * 2 + 'px'; // radius*2 = diameter
}

如何在Ionic v4中为FAB设置自定义大小？

2 个答案: