angularjs - 如何在 ionic 中制作圆形输入字段？

Question

我可以用图标制作输入字段，但我需要输入字段应该是圆 Angular 的![在此处输入图片描述][1] 并且水平中心宽度更小，如图所示。请检查下图

请检查我的搜索栏是否宽度较小且水平居中并带有圆 Angular 。我们可以用 ionic 制作吗

这是我的代码

 <ion-content>
       <div class="list list-inset">
  <label class="item item-input">
    <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
    <input type="text" placeholder="Search">
  </label>
</div>



    </ion-content>

Answer 1

答案很简单

首先你需要把你需要的所有东西放在 ion-item 标签里，然后你需要一些 css 属性来塑造那个 ion-item

例子

HTML 代码:

<ion-item class="roundedInput">
  <ion-label position="floating">Rounded Input</ion-label>
  <ion-input></ion-input>
</ion-item>

CSS 代码:

.roundedInput {
  --border-color: var(--ion-color-medium-shade);
  --border-radius: 3px;
  --border-width: 1px;
  --box-shadow: 2px gray;
  --highlight-height: 0;
  --background: #f8f9fa;
 }

要控制项目行为，您需要更多 CSS 代码

像这样:

.roundedInput.ion-invalid.item-has-focus {

  --border-color: var(--ion-color-danger-shade);
}

.roundedInput.ion-valid.item-has-focus {
  --border-color: var(--ion-color-success-shade);
}

.roundedInput.ion-invalid.ion-dirty {
  --border-color: var(--ion-color-danger-shade);
}

.roundedInput.ion-valid.ion-dirty {
  --border-color: var(--ion-color-success-shade);
}

float 位置的标签会增加输入高度

如果它不是你喜欢的，你需要做的只是将位置更改为静态或没有位置属性。或者你可以只使用占位符