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

Question

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

有两个图标，效果很好：

我用这段代码做到了：

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

但是如果我启用离子切换，那么两行文字就会消失：

我错过了什么？

谢谢。

Answer 1

我可以重现你的问题，不太清楚那里发生了什么。可能是一个bug。

无论如何：在<ion-label>中包装文字可以解决我的问题：

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

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

Answer 2

如果有多行，请使用class="ion-text-wrap"：

<ion-label>
    <h2>test</h2>
    <p class="ion-text-wrap">
        A very big string
    </p>
</ion-label>