3

I want to have a list item that can be swiped to reveal an archive button.

The icon should be to the left of the text.

I'm following the doc here (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>

But it still displays the icon on top of the text, see an example here: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html

What am I missing?

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
franswa
  • 836
  • 1
  • 9
  • 21

1 Answers1

2

Seems like it's caused because of a bug in how the CSS rules are being applied but in the meantime, it works properly if you also add the icon-left attribute

<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

More info:

I've found that the following style rule is being applied which causes the issue. So the only way to avoid this issue is to use both icon-left and icon-start attributes:

// 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;
}
sebaferreras
  • 44,206
  • 11
  • 116
  • 134