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

iovurdzv 于 2023-02-27 发布在 Ionic

关注(0)|答案(6)|浏览(184)

我是跨平台开发的新手。正在努力改变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 -都不行。

ionic-framework

来源：https://stackoverflow.com/questions/40657813/ionic-how-to-change-the-size-of-fab-icon

6条答案

按热度按时间

fjnneemd1#

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

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

赞(0）回复(0）举报 2023-02-27

0dxa2lsx2#

尝试使用此：

<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按钮变大或变小。

赞(0）回复(0）举报 2023-02-27

nx7onnlm3#

如果你想改变晶圆厂的大小，并仍然有它居中添加这些类到您的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

赞(0）回复(0）举报 2023-02-27

unftdfkk4#

可以使用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;获得元素）
x一个一个一个一个x一个一个二个x
(The父节点可以具有style="position: relative;"。）

赞(0）回复(0）举报 2023-02-27

vsdwdz235#

有一个大小属性：https://ionicframework.com/docs/api/fab-button#size
但不幸的是，它只做了一点更改，并且该属性总共只有两种不同的大小可用

赞(0）回复(0）举报 2023-02-27

igsr9ssn6#

您可以使用离子制造按钮：

<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

赞(0）回复(0）举报 2023-02-27

我来回答

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

6条答案

相关问题

热门标签

最新问答