Ionic ion-select, ion-select-option

Question

我创建了一个带有电容器的新项目离子。我使用使用离子选择，但我有我新的离子选择选项（通过）大文本，而不是在输入中分配。

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>

  </ion-select>
</ion-item>

如何更改此属性以查看所有文本。 显示我的图像

Answer 1

感谢您的帮助。我尝试这种方式它的工作 // 离子 6 版本

ion-select::part(text) {
    white-space: normal !important;
    transform: none !important;
}

Answer 2

要在 ion-select 中显示所有文本，您可以在 ion-text-wrap 上使用 ion-select-option 类。此类由 Ionic CSS 实用程序 (https://ionicframework.com/docs/layout/css-utilities) 提供。你的代码应该是这样的：

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option class="ion-text-wrap" value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>
  </ion-select>
</ion-item>

编辑： ion-text-wrap 类似乎没有将文本包裹在 ion-select 文本框中。由于这个元素在shadowroot中，所以需要使用一些javascript来动态应用样式。

因此您需要首先为您的 ion-select 组件提供一个 #id 并向 (ionChange) 事件添加回调：

<ion-item text-wrap>
    <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
    <ion-select (ionChange)="editShadowStyle()" id="my-select">
        <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria,
            Mancha
            marrón de las
            mandarinas (primavera)
        </ion-select-option>
    </ion-select>
</ion-item>

然后，在你的打字稿文件中，定义这个函数：

editShadowStyle() {
    let textbox = document
      .getElementById("my-select")
      .shadowRoot.querySelector("div");
    textbox.setAttribute("style", "white-space:pre-line");
}

这样，每次在 ion-select 中选择一个选项时，shadowroot 元素样式都会被编辑。请看下面的结果：https://stackblitz.com/edit/ionic-v4-fztn1b?file=src/app/app.component.ts