【问题标题】: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吗?顺便说一句 &lt;ion-fab center bottom&gt; 这会将您的 fab 按钮对齐在页面的中心和底部,但是如果您有 &lt;ion-fab right bottom&gt; 您将在右下角有按钮
      • 是的,我使用了中心中间,因为我基本上需要在屏幕中心有一个大的可点击圆圈。
      • 我也尝试在 .scss 文件中使用位置、对齐属性,没有用
      • 我在我的代码上尝试了这个&lt;ion-fab center middle&gt;,它可以工作,那么你的代码是什么?
      【解决方案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

          【讨论】:

            猜你喜欢
            • 2018-12-11
            • 1970-01-01
            • 2018-01-16
            • 1970-01-01
            • 2019-11-10
            • 2014-01-26
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多