带离子切换的多行离子项答案

【问题标题】：Multiline ion-item with ion-toggle带离子切换的多行离子项
【发布时间】：2018-07-12 10:56:11
【问题描述】：

使用离子 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>

但如果我启用离子切换，两行文本会像这样消失：

我错过了什么？

谢谢。

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

我可以重现您的问题，但不太确定那里发生了什么。可能是一个错误。

无论如何，将您的文本包装在 <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>。

【讨论】：

这在你只有 2 行时有效...如果我有 4 行我该怎么办？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以使用

示例：

<ion-item>
      <ion-icon name="american-football" item-start></ion-icon>
      <ion-label text-wrap>

【讨论】：