Ionic - ItemSliding：ボタンレイアウトが機能しない

Question

archiveボタンを表示するためにスワイプできるリスト項目が必要です。

アイコンは、、左側はです。

私はここにドキュメントを以下のよ（ボタンレイアウト）：私は何をしないのですhttps://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html

：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> 

しかし、それはまだ、テキストの上にアイコンが表示され、ここでの例を参照してください？それがためにCSSルールが適用されている方法ではなく、その間のバグの原因ているよう

Answer 1

はそう、それはあなたにも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-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; 
}