ionic3中关于Ionic ui component使用的一些总结

在我的理解中，IONIC中例如 ion-list ion-item ion-input 其实就是相于一段自定义的指令，相对于angular1.x中的东西，

所以，我们在使用中，要特别去注意button 与ion-input这些控件的使用

举例：

<ion-list>

  <ion-item>

    <ion-label fixed>Username</ion-label>

    <ion-input type="text" value=""></ion-input>

  </ion-item>

  <ion-item>

    <ion-label fixed>Password</ion-label>

    <ion-input type="password"></ion-input>

  </ion-item>

</ion-list>

可以这样写，但是不能在原本的HTML标签中内嵌ion-*，例如，这种是不允许的：

  <ion-list>

    <ion-item>

      <ion-thumbnail item-start>

        <img src="../../assets/imgs/avatar-ben.png">

      </ion-thumbnail>

      <h2>当前电量信息</h2>

      <p>

      <ion-input [value]="batterStatusInfo" readonly="true" />

      <input type="text" [value]="batterStatusInfo" readonly="true" /></p>

      <button ion-button clear item-end (click)="showBatteryStatus()">实时查询</button>

    </ion-item>

  </ion-list>

注意：不能在原本的HTML标签中内嵌Ion-*指令，这是不会被正确解析的

巴特西

ionic3中关于Ionic ui component使用的一些总结

最新文章

热门文章