Ionic - ItemSliding: Button Layout funktioniert nicht

Question

Ich möchte ein Listenelement haben, das übersprungen werden kann, um eine archive Schaltfläche anzuzeigen.

Das Symbol sollte auf der linken Seite des Textes sein.

Ich folge den doc hier (Button-Layout): 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> 

Aber es zeigt immer noch das Symbol oben auf den Text, um ein Beispiel sehen hier: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html

Was bin ich fehlt ?

Answer 1

Scheint, wie es aufgrund eines Fehlers in, wie die CSS-Regeln angewendet verursacht wird werden aber in der Zwischenzeit, es funktioniert einwandfrei, wenn Sie auch das icon-left Attribut hinzufügen

<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

---

Weitere Informationen:

Ich habe festgestellt, dass die folgende Stilregel angewendet wird, die das Problem verursacht. Die einzige Möglichkeit, dieses Problem zu vermeiden, besteht darin, sowohl die Attribute icon-left als auch icon-start zu verwenden:

// 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; 
}