带有自定义全宽形状控制的离子标签

Question

如何将ion-label与100％宽度的自定义表单控件一起使用？ 目前，只要我在表单中的ion-label内添加ion-item，我使用的是自定义表单控件（不是ion-input），我的自定义表单控件字段就不再可见了。< / p>

那么，我可以更改什么才能使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，如下所示。

  

那是因为离子项组件具有预定义的选择器组   可用于在该组件内转换

official Git Repo

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

如果您需要使用full width，那么：

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

Answer 2

我尝试了以下操作并且很聪明，请尝试更新任何其他好的方法。

<ion-row>
   <ion-col size="5">
        <ion-label floating>Content: </ion-label>
    </ion-col>
    <ion-col size="7">
        <ion-select formControlName= ...
        </ion-select>
    </ion-col>
</ion-row>