离子：如何更改 FAB 图标的大小

Question

我是跨平台开发新手。努力改变 FAB 的大小。这就是我现在拥有的：

<ion-fab center middle>
<button ion-fab color="blue" class="fabStartBtn"><ion-icon 
name="start">Start</ion-icon></button>
</ion-fab>  

.fabStartBtn {
font-size: 72px;
}

但是大小还是一样。如何访问按钮属性？我试过 id, name, #name, :before - 没用。

Answer 1

尝试使用这个：

<ion-fab center bottom>
  <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

如果您使用 mini 属性，您可以修改大小：

.fab[mini] {
    margin: 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

如果您修改 class，您可以使 FAB 按钮变大或变小。

Answer 2

进入您的 theme/variables.scss 文件并覆盖 $fab-size 变量，如下所示：

$fab-size: 70px; //Change value to whatever size you want

Answer 3

您可以使用 ion-fab-button：

<ion-fab center middle>
    <ion-fab-button size="small" color="blue" class="fabStartBtn">
       <ion-icon name="start">Start</ion-icon>
    </ion-fab-button>
</ion-fab>

在此处查看文档 https://ionicframework.com/docs/api/fab-button

Answer 4

可以在 Angular 中使用样式绑定 甚至动态更改 Ion Fab 的大小 调整大小操作后，您必须重新计算并设置 top-left 位置（使用比例坐标 x,y）

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

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

fab.nativeElement.style.left = (x -  this.radius/parentWidth) * 100 + '%';
fab.nativeElement.style.top = (y - this.radius/parentHeight) * 100 + '%';

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

（parent可能有style="position: relative;"。）

Answer 5

如果您想更改 fab 的大小并使其居中，请将这些类添加到您的 scss。

ion-fab-button {
   width: 100px;
   height: 100px;
}

.fab-horizontal-center {
   margin-left: unset;
   margin-inline-start: -50px !important;
}

margin-inline-start 必须是宽度的一半。

在此处报告错误：https://github.com/ionic-team/ionic-framework/issues/22564

离子：如何更改 FAB 图标的大小

ionic: how to change the size of FAB icon

html

cross-platform

sass

ionic-framework

floating-action-button