【问题标题】:Why can't I style ion-button inside div为什么我不能在 div 中设置离子按钮的样式
【发布时间】:2020-09-20 15:29:18
【问题描述】:

我在具有类“底部”的 div 中具有类“record-btn”的离子按钮。我想让那个按钮变成圆形(完整的圆圈)。但我不能用css做到这一点。这是我的代码。

HTML

<ion-content>
  <div class="bottom-section">
    <ion-button color="danger" size="large" class="record-btn">
      <ion-icon slot="icon-only" name="mic"></ion-icon>
    </ion-button>
  </div>
</ion-content>

SCSS

.bottom-section .record-btn {
    border-radius: 50px;
}

我也尝试从 SCSS 中删除类 .bottom-section 但没有任何反应。谁能帮我看看怎么办?

【问题讨论】:

    标签: html css ionic-framework


    【解决方案1】:

    那是因为您试图为封装在 shadow DOM 中的元素设置样式。要更改边框半径,您必须使用 Ionic 提供的 custom CSS property --border-radius

    要获得圆形按钮,您需要这样做,并强制宽度和高度相同。

    .bottom-section .record-btn {
        --border-radius: 50%;
        height: 80px;
        width: 80px;
    }
    

    但是,对于您要完成的工作,更好的解决方案可能是使用 Floating Action Button 组件

    【讨论】:

      猜你喜欢
      • 2019-01-13
      • 1970-01-01
      • 2011-02-07
      • 1970-01-01
      • 2021-11-28
      • 2013-01-04
      • 2010-11-22
      • 1970-01-01
      相关资源
      最近更新 更多