ionic：如何更改 FAB 图标的大小答案

【问题标题】：ionic: how to change the size of FAB iconionic：如何更改 FAB 图标的大小
【发布时间】：2017-04-01 04:00:54
【问题描述】：

我是跨平台开发的新手。努力改变 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 - 没用。

【问题讨论】：

标签： html ionic-framework sass cross-platform floating-action-button

【解决方案1】：

进入您的theme/variables.scss 文件并像这样覆盖$fab-size 变量：

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

【讨论】：

【解决方案2】：

尝试使用这个：

<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;
}

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

【讨论】：

谢谢，成功了！现在可以自定义大小，但是位置不在中心，由于某种原因它移到了右下角。可能是什么原因？
你能给我html吗？顺便说一句 <ion-fab center bottom> 这会将您的 fab 按钮对齐在页面的中心和底部，但是如果您有 <ion-fab right bottom> 您将在右下角有按钮
是的，我使用了中心中间，因为我基本上需要在屏幕中心有一个大的可点击圆圈。
我也尝试在 .scss 文件中使用位置、对齐属性，没有用
我在我的代码上尝试了这个<ion-fab center middle>，它可以工作，那么你的代码是什么？

【解决方案3】：

如果您想更改 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

【讨论】：

【解决方案4】：

Angular 中的样式绑定可以实现动态更改 Ion Fab 的大小 并且在调整大小操作后，您必须重新计算并设置左上角位置（使用比率坐标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
}

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

【讨论】：

【解决方案5】：

您可以使用 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

【讨论】：