
<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar>


<ion-content>
  <ion-list>

    <ion-item>
      <ion-label floating>Params: {{ myParam }}</ion-label>
      <ion-input [(ngModel)]="myParam" type="text"></ion-input>
      <button clear item-right>
        <ion-icon name="settings"></ion-icon>
      </button>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 1: {{ myValues.value1 }}</ion-label>
      <ion-input [(ngModel)]='myValues.value1'></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 2</ion-label>
      <ion-input value="Has Value"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 3</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating primary>Floating Label 4: {{ myValues.value2 }}</ion-label>
      <ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
      <button outline item-right>
        View
      </button>
    </ion-item>

    <ion-item>
      <ion-label floating secondary>Floating Label 5</ion-label>
      <ion-input type="url"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating danger>Floating Label 6</ion-label>
      <ion-input type="email"></ion-input>
      <ion-avatar item-right>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
      </ion-avatar>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 7</ion-label>
      <ion-textarea></ion-textarea>
      <ion-thumbnail item-right>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
      </ion-thumbnail>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 8</ion-label>
      <ion-input></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 9</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Floating Label 10</ion-label>
      <ion-textarea></ion-textarea>
    </ion-item>

  </ion-list>

</ion-content>

<style>
  img {
    height: 100px;
  }
</style>
