首页 文章

具有离子切换的多线离子项

提问于
浏览 次
3

使用Ionic 3.19.1 . 我想创建离子项，左边有一个图标，中间有两行，最后有一个离子切换 .

有两个图标，它完美地工作：

two icons with two text lines

我用这段代码做到了：

<ion-list>
    <ion-item>
      <ion-icon name="american-football" item-start></ion-icon>
      <h2>prefs_transversal_products</h2>
      <p>prefs_transversal_products_desc</p>
      <!-- <ion-toggle color="secondary" item-end></ion-toggle>  -->
      <ion-icon name="american-football" item-end></ion-icon>
    </ion-item>
  </ion-list>

但是，如果我启用离子切换，则两行文本将消失，如下所示：

lines missing

我错过了什么？

谢谢 .

ionic3

1 回答

  • 4

    我可以重现你的问题，不太确定那里发生了什么 . 可能是个bug .

    无论如何：在_1028647中包装你的文字为我解决了这个问题：

    <ion-list>
    <ion-item text-wrap>
        <ion-icon name="american-football" item-start></ion-icon>
        <ion-label>
            <h2>prefs_transversal_products</h2>
            <p>prefs_transversal_products_desc</p>
        </ion-label>
        <ion-toggle color="secondary" item-end></ion-toggle>
    </ion-item>
</ion-list>

    result

    有关其他信息，请参阅docs for advanced usage of <ion-item> .

    回复于

相关问题