带定制全宽窗体控件的离子标签

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-endattribute像下面一样。

这是因为离子项目组件已经预定义的选择是 可用于该组件

official Git Repo

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

内transclude如果你需要使用full width那么：

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