在 ion-item 中内联显示信息图标

Question

我想在输入框的末尾显示离子信息图标。但是，以下代码片段仅显示输入框，而不显示图标：

<ion-header>
  <ion-navbar>     
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form  novalidate offset-lg-3 offset-xl-4 col-lg-6 col-xl-4>
    <ion-list inset>
      <p>Forget password</p>
      <ion-item>
        <ion-input  placeholder="Email or Phone" name="email">
          </ion-input>
        <button ion-button clear >
          <ion-icon name="ios-information-circle-outline" ></ion-icon>
        </button>
      </ion-item>    
    </ion-list>
    <button ion-button round full type="submit">Submit</button>    
  </form>
</ion-content>

当前输出：

预期输出：

我想在用户点击时显示一些帮助文本 icon.I 我肯定遗漏了一些东西 here.What 我应该做些什么来让图标出现吗？

Answer 1

<ion-item>
    <ion-input  placeholder="Email or Phone" name="email">
      </ion-input>
    <button ion-button clear item-end icon-only>
    <ion-icon name="ios-information-circle-outline" ></ion-icon>
    </button>
  </ion-item>

你必须在 ion-label 中使用 ion-icon

Answer 2

ion-item 将内容设置为单行。您缺少按钮上的属性 item-end。我还建议添加 icon-only 以获得作为指定图标的完整按钮。

代码：

<ion-content padding>
  <form  novalidate offset-lg-3 offset-xl-4 col-lg-6 col-xl-4>
    <ion-list inset>
      <p>Forget password</p>
      <ion-item>
        <ion-input  placeholder="Email or Phone" name="email">
          </ion-input>
        <button ion-button clear item-end icon-only><!-- here -->
          <ion-icon name="ios-information-circle-outline" ></ion-icon>
        </button>
      </ion-item>    
    </ion-list>
    <button ion-button round full type="submit">Submit</button>    
  </form>
</ion-content>

demo

在 ion-item 中内联显示信息图标

Display info icon inline in ion-item

html

javascript

ionic-framework

ionic2

angular