Ionic - ItemSliding：按钮布局不起作用

Posted 2023-03-13

【中文标题】Ionic - ItemSliding：按钮布局不起作用

【英文标题】：Ionic - ItemSliding: Button Layout not working

【发布时间】：2018-05-10 09:36:07

【问题描述】：

我想要一个可以滑动以显示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

我错过了什么？

【参考方案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;

【讨论】：

您在哪里找到这些样式规则？我有类似的问题，但没有解决

@shashikantdwivedi 我刚刚检查了浏览器中的元素并开始删除每个 css 规则以查看导致问题的原因：/