如何更改 Ionic 4 中的离子按钮大小？

Question

我在 Ionic 4 中更改 ion-button 的大小时遇到问题。同样的代码用于以前的版本 Ionic 3。我已经修改了按钮的宽度和高度，但什么都没有作品。

所有显示的都是标准离子按钮，height/width 没有变化。

page.scss

.button {
        display: table;
        margin: 0 auto;
        border-radius: 4px;
        margin-top: 27px;
   .login {
        font-family: $font;
        letter-spacing: 2px;
        width: 280px;
        height: 50px;
        display: block;
        border-radius: 4px;
    }
}

page.html

<div class="button"><ion-button class="login" (click)="login(oldUser)">LOGIN</ion-button></div>

Answer 1

您可以在 github 上找到 custom buttons 的示例。

我可以提供一个片段：

<ion-button class="round">rounded</ion-button>

    .round {
  --width: 60px;
  --height: 60px;
  --border-radius: 50%;
  --vertical-align: middle;
  --padding-start: 10px;
  --padding-end: 10px;
}

您可以将它添加到您的应用中您想要的位置，这是使用 CSS4 完成的。

如果你打算改变所有 ion-button 考虑这样做 globally。

在此处检查 Available custom control properties。

如何更改 Ionic 4 中的离子按钮大小？

How to change ion-button size in Ionic 4?

html

css

ionic-framework

angular

ionic4