代码之家 › 专栏 › 技术社区 › Kumar

在离子项目中内联显示信息图标

ionic2 ionic-framework angular html javascript

Kumar · 技术社区 · 6 年前

我想在输入框的末尾显示ionic信息图标。但是,以下代码段仅显示输入框,而不显示图标:

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

电流输出:

预期输出:

我想在用户单击图标时显示一些帮助文本。我肯定错过了一些东西。我应该怎么做才能显示图标?

2 回复 | 直到 6 年前

Suraj Rao Soumya Sengupta 6 年前

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

Sagar Kharche 6 年前

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

必须在离子标签内使用离子图标

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前