在Ionic 4中如何更改离子项目滑动中按钮的颜色

Question

我正在尝试在Ionic 4的离子项目滑动元素中使用红色按钮。这是代码：

  <ion-card>
  <ion-item-sliding>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/shapes.svg">
      </ion-avatar>
      <ion-label>
        <h3>test</h3>
        <p>test</p>
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
          <button ion-button color="danger">
            <ion-icon name="trash"></ion-icon>
            Delete
          </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-card>

但是，按钮显示为灰色，而应显示为红色。我也尝试使用离子按钮代替按钮。它起作用了，但是当我将其与expand="full"结合使用时，按钮文本的颜色变为红色，而不是按钮本身的颜色。

Answer 1

<ion-card>
  <ion-item-sliding>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/shapes.svg">
      </ion-avatar>
      <ion-label>
        <h3>test</h3>
        <p>test</p>
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
          <ion-button color="danger" expand="full">
            <ion-icon name="trash"></ion-icon>
            Delete
          </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-card>

您可以使用仅由按钮组成的离子按钮，它们可以更改按钮的颜色

Answer 2

使用defaut按钮工作正常：

<ion-card>
<ion-item-sliding>
  <ion-item>
    <ion-avatar slot="start">
      <img src="assets/shapes.svg">
    </ion-avatar>
    <ion-label>
      <h3>test</h3>
      <p>test</p>
    </ion-label>
  </ion-item>
  <ion-item-options side="end">
    <ion-item-option color="danger" expandable>
      <ion-icon name="trash"></ion-icon>Delete
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

希望它对您有帮助：）