如何将 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>
然而,这最终只占用了我页面宽度的一小部分。
我希望 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>
最佳答案
您需要添加 item-end
attribute
如下所示。
That's because ion-item component has predefined set of selectors that can be used to transclude inside that component
<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>
关于angular - 具有自定义全宽表单控件的 ionic 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46445919/