angular - 具有自定义全宽表单控件的 ionic 标签

Question

如何将 ion-label 与 100% 宽度的自定义表单控件一起使用？目前，一旦我将 ion-label 添加到我的表单内的 ion-item 中，我就在其中使用自定义表单控件(不是 ion-input) 我的自定义表单控件字段不再可见。

那么，我可以更改什么以使 ion-label 与自定义表单控件一起使用？

示例代码:

<ion-item>
  <ion-label floating>Keywords</ion-label>
  <custom-input formControlName="content"></custom-input>
</ion-item>

我也试过这个:

<!-- Item with a label and content -->
  <ion-item>
    <ion-label>
      Item Label
    </ion-label>
    <div item-content>
      Item Content will be next to the label (not full width)
      <custom-input formControlName="content" item-end></custom-input>
    </div>
  </ion-item>

然而，这最终只占用了我页面宽度的一小部分。

使用item-end:

使用 item-content:

我希望 custom-input 宽度为 100%(例如文本编辑器)

解决方案

灵感来自@Sampath 的双项想法:

<ion-item no-lines>
  <ion-label>Content</ion-label>
</ion-item>
<ion-item>
  <custom-input formControlName="content"></custom-input>
</ion-item>

Answer 1

您需要添加 item-end attribute 如下所示。

That's because ion-item component has predefined set of selectors that can be used to transclude inside that component

official Git Repo

<ion-item>
  <ion-label floating>Keywords</ion-label>
  <custom-input formControlName="content" item-end></custom-input>
</ion-item>

如果您需要使用全宽，那么:

<ion-item>
  <ion-label floating>Keywords</ion-label>
 </ion-item>
<ion-item>
  <custom-input formControlName="content" item-start></custom-input>
</ion-item>