在 Ionic 6 中从 css 设置填充颜色属性答案

【问题标题】：Setting the fill color attribute from css in Ionic 6在 Ionic 6 中从 css 设置填充颜色属性
【发布时间】：2022-01-31 17:40:19
【问题描述】：

<div class="button-bar">
      <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")'>
        <ion-icon size='small' name="information-circle-outline"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'customer' ? 'solid' : ''" (click)='selectTab("customer")'>
        <ion-icon size='small' name="person-circle"></ion-icon>
      </ion-button>

      <ion-button size='small' [fill]="tabSelected == 'colleagues' ? 'solid' :''" (click)='selectTab("colleagues")'>
        <ion-icon size='small' name="people-outline"></ion-icon>
      </ion-button>
    </div>

按下按钮时，我想设置按钮的填充颜色。在这种情况下，我将 tabSelected 设置为某个值，然后在此基础上将填充设为“实心”。

我想从 Html 外部管理所有颜色，因此通过 CSS 设置它。

ion-button {
  --color: var(--ion-color-pmblue-contrast);
  --background: var(--ion-color-pmblue);
}

这会将按钮的背景设置为蓝色，但在这种情况下，我只想让活动按钮具有这种状态。我考虑过用 ngclass 添加一个类，而不是用于填充，在这种情况下是这样吗？

发生：

首选：（这是在 HTML 上将颜色设置为属性 color='pmblue'）CSS 中 ion-button 上的颜色指向文本颜色。

【问题讨论】：

标签： html css angular ionic-framework ionic6

【解决方案1】：

如果我错了，请纠正我，但 ionc 图标和按钮没有颜色属性？

例如你可以这样做：

 <ion-button size='small' [fill]="tabSelected == 'details'? 'solid' : ''" (click)='selectTab("details")' [color]="tabSelected == 'colleagues'? 'pmblue' : ''" }">

【讨论】：

你是对的。在这种情况下，我宁愿不在模板中对其进行硬编码。我不知道这行得通。我现在可以为这个特定元素“定义自定义颜色”。正确的语法是 [color]="tabSelected == 'colleagues'? 'pmblue' : ''" 你介意在你的回答中调整它，我接受它。
我更正了语法。