css - ionic - ItemSliding : Button Layout not working

Question

我想要一个可以滑动以显示archive 按钮的列表项。

图标应位于文本的左侧。

我在这里关注文档(按钮布局):https://ionicframework.com/docs/api/components/item/ItemSliding/

<ion-item-options icon-start>
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

但它仍然在文本顶部显示图标，请参见此处的示例:https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html

我错过了什么？

Answer 1

这似乎是因为 CSS 规则的应用方式存在错误，但与此同时，如果您还添加 icon-left 属性，它会正常工作

<ion-content padding>
    <ion-list>
        <ion-item-sliding #item>
            <ion-item>
                Swipe me!
            </ion-item>
            <ion-item-options icon-left icon-start> <!-- Here! -->
                <button ion-button (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>
          Archive
        </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

Working stackblitz project

---

更多信息:

我发现正在应用以下样式规则导致了问题。所以避免这个问题的唯一方法是同时使用 icon-left 和 icon-start 属性:

// The issue is because of this style rule...
ion-item-options:not([icon-left]) .button:not([icon-only]) .button-inner, 
ion-item-options:not([icon-start]) .button:not([icon-only]) .button-inner {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}