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

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

ionic2 ionic-framework angular html javascript

Kumar · 技术社区 · 7 年前

我想在输入框的末尾显示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 回复 | 直到 7 年前

Suraj Rao Raas Masood 7 年前

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

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

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

推荐文章

Moblize IT · 未设置ion-select默认值

11 月前

Gappy · 为什么Angular要求一个独立的组件,即使它是

1 年前

ProgrammingStudent · 使用javascript更新ionic web应用程序中.pane和.view的背景色

1 年前

user_1357 · Firebase是否将现有用户链接到匿名帐户?

1 年前

m_m · Axios onUploadProgress事件在Capacitor Android上未触发的问题

2 年前

Yeo Bryan · Ionic项目申请通知权限

2 年前

Joe Johnson · Ionic 7模态在第二次点击时不起作用

2 年前

Piyush aggarwal · 通过Cordova文件打开程序2避免REQUEST_INSTALL_PERMISSION

2 年前

Roberto Vieira · 我的离子搜索栏过滤器不工作

2 年前

marlonga · 错误:在Ionic Angular应用程序中使用argon2浏览器时找不到模块

2 年前