在离子项中内嵌显示信息图标 [英] Display info icon inline in ion-item

问题描述

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

I want to display ionic info icon at the end of my input box. However, the following snippet shows only input box, not the icon:

<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>

当前输出：

Current output:

预期产出：

expected output:

我想要当用户点击图标时显示一些帮助文本。我肯定在这里遗漏了一些东西。我应该怎么做才能显示图标？

I would like to show some help text when the user clicks on the icon.I am certainly missing something here.What should I have done to make the icon appear?

推荐答案

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

ion-item sets the content in a single row. You were missing an attribute item-end on the button. I would also recommend adding icon-only in order to get the full button as the specified icon.

代码：

<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>

演示

这篇关于在离子项中内嵌显示信息图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！