如何使用浮动标签进行离子选择 [英] how to use floating lable for ion-select

问题描述

如果我使用带有浮动标签的输入标签，它就会像下面的图像一样使用电话标签。我使用带有浮动标签的选择标签就像国家标签一样。

if i am using input tag with floating lable it was comming like phone tag like below image.I use select tag with floating lable it was comming like country tag.

我希望国家也像手机标签一样。我怎样才能看起来和手机标签一样。

i want country also come like phone tag.How can i get look and feel same as like phone tag.

HTML代码

html code

<ion-item width-50 >
  <ion-label floating>Phone</ion-label>
  <ion-input type="tel"></ion-input>
</ion-item>

<ion-item width-50>
  <ion-label floating>Country</ion-label>
  <ion-select [(ngModel)]="country">
    <ion-option>{{country}}</ion-option>
  </ion-select>
</ion-item>

推荐答案

不幸的是，你不能用浮动标签来做到这一点。就外观而言，您可以预先选择select元素的第一个选项，以避免该字段为空。至少我们在表单中做的就是让它们看起来更漂亮。

Unfortunately, you can't do that with the floating label. In terms of look and feel, you can pre-select the first option of the select element, in order to avoid that field being empty like that. At least that's what we do in our forms to make them look nicer.

另一种选择可能就是设计你可以看到的表格此处，这样您就可以使输入字段看起来与选择元素相同。

Another option could be to design the form like you can see here, and that way you can make the input fields look the same as the select elements.

这篇关于如何使用浮动标签进行离子选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！