docs(demos): update demos with item-refactor

demos/checkbox/main.html

@@ -5,53 +5,65 @@
 <ion-content>
   <ion-list>
 
-    <ion-checkbox checked="true">
-      Jon Snow
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox checked="true"></ion-checkbox>
+      <ion-label>Jon Snow</ion-label>
+    </ion-item>
 
-    <ion-checkbox dark checked="true">
-      Daenerys Targaryen
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox dark checked="true"></ion-checkbox>
+      <ion-label>Daenerys Targaryen</ion-label>
+    </ion-item>
 
-    <ion-checkbox value="cherry" disabled="true">
-      Arya Stark
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox value="cherry" disabled="true"></ion-checkbox>
+      <ion-label>Arya Stark</ion-label>
+    </ion-item>
 
-    <ion-checkbox secondary>
-      Tyrion Lannister
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox secondary></ion-checkbox>
+      <ion-label>Tyrion Lannister</ion-label>
+    </ion-item>
 
-    <ion-checkbox danger checked="true">
-      Sansa Stark
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox danger checked="true"></ion-checkbox>
+      <ion-label>Sansa Stark</ion-label>
+    </ion-item>
 
-    <ion-checkbox>
-      Khal Drogo
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox></ion-checkbox>
+      <ion-label>Khal Drogo</ion-label>
+    </ion-item>
 
-    <ion-checkbox energized checked="true" dark>
-      Cersei Lannister
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox energized checked="true" dark></ion-checkbox>
+      <ion-label>Cersei Lannister</ion-label>
+    </ion-item>
 
-    <ion-checkbox royal checked="true">
-      Stannis Baratheon
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox royal checked="true"></ion-checkbox>
+      <ion-label>Stannis Baratheon</ion-label>
+    </ion-item>
 
-    <ion-checkbox disabled="true">
-      Petyr Baelish
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox disabled="true"></ion-checkbox>
+      <ion-label>Petyr Baelish</ion-label>
+    </ion-item>
 
-    <ion-checkbox dark checked="true">
-      Hodor
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox dark checked="true"></ion-checkbox>
+      <ion-label>Hodor</ion-label>
+    </ion-item>
 
-    <ion-checkbox secondary checked="true">
-      Catelyn Stark
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox secondary checked="true"></ion-checkbox>
+      <ion-label>Catelyn Stark</ion-label>
+    </ion-item>
 
-    <ion-checkbox royal>
-      Bronn
-    </ion-checkbox>
+    <ion-item>
+      <ion-checkbox royal></ion-checkbox>
+      <ion-label>Bronn</ion-label>
+    </ion-item>
 
   </ion-list>
 </ion-content>

demos/label/app.html

@@ -1,2 +1 @@
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
-<ion-overlay></ion-overlay>

demos/label/main.html

@@ -4,29 +4,29 @@
 
 <ion-content>
   <ion-row>
-    <ion-input>
-      <input type="text" placeholder="Placeholder Label">
-    </ion-input>
+    <ion-item>
+      <ion-input placeholder="Placeholder Label"></ion-input>
+    </ion-item>
   </ion-row>
 
   <ion-row>
-    <ion-input fixed-label>
-      <ion-label>Fixed Label</ion-label>
-      <input type="text" value="">
-    </ion-input>
+    <ion-item>
+      <ion-label fixed>Fixed Label</ion-label>
+      <ion-input type="text" value=""></ion-input>
+    </ion-item>
   </ion-row>
 
   <ion-row>
-    <ion-input floating-label>
-      <ion-label>Floating Label</ion-label>
-      <input type="text" value="">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label</ion-label>
+      <ion-input type="text" value=""></ion-input>
+    </ion-item>
   </ion-row>
 
   <ion-row>
-    <ion-input stacked-label>
-      <ion-label>Stacked Label</ion-label>
-      <input type="text" value="">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Stacked Label</ion-label>
+      <ion-input type="text" value=""></ion-input>
+    </ion-item>
   </ion-row>
 </ion-content>

demos/list/basic-list.html

@@ -19,10 +19,11 @@
       List Header
     </ion-list-header>
 
-    <ion-toggle>
+    <ion-item>
       <ion-icon name="wifi" item-left></ion-icon>
-      Wifi
-    </ion-toggle>
+      <ion-label>Wifi</ion-label>
+      <ion-toggle></ion-toggle>
+    </ion-item>
 
     <ion-item>
       <ion-icon name="heart" item-left></ion-icon>
@@ -40,10 +41,11 @@
       </ion-note>
     </ion-item>
 
-    <ion-toggle checked="true">
+    <ion-item>
       <ion-icon name="color-wand" item-left></ion-icon>
-      Magic
-    </ion-toggle>
+      <ion-label>Magic</ion-label>
+      <ion-toggle secondary checked="true"></ion-toggle>
+    </ion-item>
 
     <ion-item>
       <ion-icon name="star" item-left></ion-icon>

demos/local-storage/main.html

@@ -6,15 +6,15 @@
 
   <ion-row>
     <ion-col width-33>
-      <ion-input>
-        <input type="text" placeholder="Key" [(ngModel)]="myItem.key">
-      </ion-input>
+      <ion-item>
+        <ion-input type="text" placeholder="Key" [(ngModel)]="myItem.key"></ion-input>
+      </ion-item>
     </ion-col>
 
     <ion-col width-33>
-      <ion-input>
-        <input type="text" placeholder="Value" [(ngModel)]="myItem.value">
-      </ion-input>
+      <ion-item>
+        <ion-input type="text" placeholder="Value" [(ngModel)]="myItem.value"></ion-input>
+      </ion-item>
     </ion-col>
 
     <ion-col width-34>
@@ -28,9 +28,9 @@
   <ion-row>
 
     <ion-col width-33>
-      <ion-input>
-        <input type="text" placeholder="Key" [(ngModel)]="delKey">
-      </ion-input>
+      <ion-item>
+        <ion-input type="text" placeholder="Key" [(ngModel)]="delKey"></ion-input>
+      </ion-item>
     </ion-col>
 
     <ion-col width-34 offset-33>

demos/modal/app.html

@@ -1,2 +1 @@
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
-<ion-overlay></ion-overlay>

demos/modal/main.html

@@ -4,22 +4,23 @@
 
 <ion-content padding>
   <ion-row>
-    <button secondary clear (click)="openBasicModal()">Open Basic Modal</button>    
+    <button secondary clear (click)="openBasicModal()">Open Basic Modal</button>
   </ion-row>
 
 <!--   <ion-row>
-    <button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>    
+    <button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>
   </ion-row> -->
-  
+
   <ion-row>
     <ion-col>
       <button secondary (click)="openModalWithParams()">Pass Params</button>
     </ion-col>
     <ion-col>
-      <ion-input floating-label style="margin-top: -10px">
-        <ion-label>Params</ion-label>
-        <input [(ngModel)]="myParam" type="text" value="">
-      </ion-input>
+      <ion-item>
+        <ion-label floating>Params</ion-label>
+        <ion-input [(ngModel)]="myParam" type="text"></ion-input>
+        {{ myParam }}
+      </ion-item>
     </ion-col>
   </ion-row>
 </ion-content>