css - 如何 ionic 按钮调整内容？

Question

我有以下代码:

<ion-button expand=“full” (click)=“do()“>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
</ion-button>

我希望内容(文本和 ionic 图标)向左对齐并尝试:

ion-button {
  display: flex;
  justify-content: flex-start;
}

我认为这会导致内容向左对齐，但没有任何反应。似乎 css 被完全忽略了。

Answer 1

如果您在按钮内添加一个 div 并使用 Ionic 4 CSS 实用程序(在您的情况下为 text-left/text-start)，则可以将文本和图标左对齐。

<ion-button expand=“full” (click)=“do()“>
 <div text-left>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
 </div>
</ion-button>

确保为 div 提供按钮的整个宽度

ion-button > div {
  width: 100%;
}

文档:
Ionic 4 CSS Utilities