docs(item): update usage documentation (#16448)

resolves #16440

core/src/components/item/readme.md

@@ -98,7 +98,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item (click)="buttonClick()">
+<ion-item (click)="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -176,33 +176,37 @@ Item Lines
 <!-- List Full Lines -->
 <ion-list lines="full">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List Inset Lines -->
 <ion-list lines="inset">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List No Lines -->
 <ion-list lines="none">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 2</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>No lines Item 3</ion-label>
   </ion-item>
 </ion-list>
 ```
@@ -418,7 +422,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item onclick="buttonClick()">
+<ion-item onclick="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -496,33 +500,37 @@ Item Lines
 <!-- List Full Lines -->
 <ion-list lines="full">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List Inset Lines -->
 <ion-list lines="inset">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List No Lines -->
 <ion-list lines="none">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 2</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>No lines Item 3</ion-label>
   </ion-item>
 </ion-list>
 ```

core/src/components/item/test/preview/index.html

@@ -24,91 +24,366 @@
       <ion-list>
         <ion-list-header>
           <ion-label>
-            List Header
+            Basic Usage
           </ion-label>
         </ion-list-header>
+
+        <!-- Default Item -->
         <ion-item>
           <ion-label>
             Item
           </ion-label>
         </ion-item>
-        <ion-item-divider>
+
+        <!-- Item as a Button -->
+        <ion-item (click)="buttonClick()">
           <ion-label>
-            Item Divider
+            Button Item
           </ion-label>
-        </ion-item-divider>
-        <ion-item>
+        </ion-item>
+
+        <!-- Item as an Anchor -->
+        <ion-item href="https://www.ionicframework.com">
           <ion-label>
-            Item
+            Anchor Item
+          </ion-label>
+        </ion-item>
+
+        <!-- Secondary Color Item-->
+        <ion-item color="secondary">
+          <ion-label>
+            Secondary Color Item
           </ion-label>
         </ion-item>
       </ion-list>
 
-      <ion-item>
-        <ion-label>
-          Plain Ol' div with some text
-        </ion-label>
-      </ion-item>
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Detail Arrows
+          </ion-label>
+        </ion-list-header>
 
-      <ion-item>
-        <ion-label>
-          Single line text that should have ellipses when it doesn't all fit in the item
-        </ion-label>
-      </ion-item>
+        <!-- Standard Item with Detail Arrow -->
+        <ion-item detail>
+          <ion-label>
+            Standard Item with Detail Arrow
+          </ion-label>
+        </ion-item>
 
-      <ion-item lines="none">
-        <ion-label>
-          Single line item with no lines
-        </ion-label>
-      </ion-item>
+        <!-- Button Item with Detail Arrow -->
+        <ion-item (click)="buttonClick()" detail>
+          <ion-label>
+            Button Item with Detail Arrow
+          </ion-label>
+        </ion-item>
 
-      <ion-item>
-        <ion-label text-wrap>
-          Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
-        </ion-label>
-      </ion-item>
+        <!-- Item as an Anchor -->
+        <ion-item href="#">
+          <ion-label>
+            Anchor Item
+          </ion-label>
+        </ion-item>
 
-      <ion-item color="secondary">
-        <ion-label text-wrap>
-          <h1>H1 Title Text</h1>
-          <p>Paragraph line 1</p>
-        </ion-label>
-      </ion-item>
+        <!-- Anchor Item with no Detail Arrow-->
+        <ion-item detail="false" href="#">
+          <ion-label>
+            Anchor Item with no Detail Arrow
+          </ion-label>
+        </ion-item>
+      </ion-list>
 
-      <ion-item>
-        <ion-label text-wrap>
-          <h2>H2 Title Text</h2>
-          <p>Paragraph line 1</p>
-        </ion-label>
-      </ion-item>
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            List Items
+          </ion-label>
+        </ion-list-header>
 
-      <ion-item>
-        <ion-label text-wrap>
-          <ion-text color="primary">
+        <!-- Item -->
+        <ion-item>
+          <ion-label>
+            Item
+          </ion-label>
+        </ion-item>
+
+        <!--  No Lines Item -->
+        <ion-item lines="none">
+          <ion-label>
+            No Lines Item
+          </ion-label>
+        </ion-item>
+
+        <!-- Multiline text Item -->
+        <ion-item>
+          <ion-label text-wrap>
+          Multiline text that should wrap when it is too long
+          to fit on one line in the item.
+          </ion-label>
+        </ion-item>
+
+        <!-- Title and paragraph-->
+        <ion-item>
+          <ion-label text-wrap>
+            <ion-text color="primary">
+              <h3>H3 Primary Title</h3>
+            </ion-text>
+            <p>Paragraph line 1</p>
+            <ion-text color="secondary">
+              <p>Paragraph line 2 secondary</p>
+            </ion-text>
+          </ion-label>
+        </ion-item>
+
+        <!-- Item with Full Lines -->
+        <ion-item lines="full">
+          <ion-label>
+            Item with Full Lines
+          </ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Item Lines
+          </ion-label>
+        </ion-list-header>
+
+        <!-- Item Inset Lines -->
+        <ion-item lines="inset">
+          <ion-label>Item Lines Inset</ion-label>
+        </ion-item>
+
+        <!-- Item Full Lines -->
+        <ion-item lines="full">
+          <ion-label>Item Lines Full</ion-label>
+        </ion-item>
+
+        <!-- Item None Lines -->
+        <ion-item lines="none">
+          <ion-label>Item Lines None</ion-label>
+        </ion-item>
+
+        <!-- List Full Lines -->
+        <ion-list lines="full">
+          <ion-item>
+            <ion-label>Full Lines Item 1</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Full Lines Item 2</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <!-- List Inset Lines -->
+        <ion-list lines="inset">
+          <ion-item>
+            <ion-label>Inset Lines Item 1</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Inset Lines Item 2</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <!-- List No Lines -->
+        <ion-list lines="none">
+          <ion-item>
+            <ion-label>No lines Item 1</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>No lines Item 2</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>No lines Item 3</ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Media Items
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item (click)="testClick()">
+          <ion-avatar slot="start">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-avatar>
+          <ion-label>
+            Avatar Start, Button Item
+          </ion-label>
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-label>
+            Thumbnail End, Anchor Item
+          </ion-label>
+          <ion-thumbnail slot="end">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-thumbnail>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>H2 Title Text</h2>
+            <p>Button on right</p>
+          </ion-label>
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
+
+        <ion-item (click)="testClick()">
+          <ion-thumbnail slot="start">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-thumbnail>
+          <ion-label>
             <h3>H3 Title Text</h3>
-          </ion-text>
-          <p>Paragraph line 1</p>
-          <ion-text color="secondary">
-            <p>Paragraph line 2 secondary</p>
-          </ion-text>
-        </ion-label>
-      </ion-item>
+            <p>Icon on right</p>
+          </ion-label>
+          <ion-icon name="close-circle" slot="end"></ion-icon>
+        </ion-item>
 
-      <ion-item>
-        <ion-label text-wrap>
-          <h4>H4 Title Text</h4>
-          <p>Paragraph line 1</p>
-          <p>Paragraph line 2</p>
-          <p>Paragraph line 3</p>
-        </ion-label>
-      </ion-item>
+      </ion-list>
 
-      <ion-item>
-        <ion-label>
-          Item using inner ion-label
-        </ion-label>
-      </ion-item>
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Buttons in Items
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-button slot="start">
+            Start
+          </ion-button>
+          <ion-label>Button Start/End</ion-label>
+          <ion-button slot="end">
+            End
+          </ion-button>
+        </ion-item>
 
+        <ion-item>
+          <ion-button slot="start">
+            Start Icon
+            <ion-icon name="home" slot="end"></ion-icon>
+          </ion-button>
+          <ion-label>Buttons with Icons</ion-label>
+          <ion-button slot="end">
+            <ion-icon name="star" slot="end"></ion-icon>
+            End Icon
+          </ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-button slot="start">
+            <ion-icon slot="icon-only" name="navigate"></ion-icon>
+          </ion-button>
+          <ion-label>Icon only Buttons</ion-label>
+          <ion-button slot="end">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Icons in Items
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label>
+            Icon End
+          </ion-label>
+          <ion-icon name="information-circle" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Large Icon End
+          </ion-label>
+          <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Small Icon End
+          </ion-label>
+          <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="star" slot="start"></ion-icon>
+          <ion-label>
+            Icon Start
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Two Icons End
+          </ion-label>
+          <ion-icon name="checkmark-circle" slot="end"></ion-icon>
+          <ion-icon name="shuffle" slot="end"></ion-icon>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Item Inputs
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label position="floating">Datetime</ion-label>
+          <ion-datetime></ion-datetime>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Select</ion-label>
+          <ion-select>
+            <ion-select-option value="">No Game Console</ion-select-option>
+            <ion-select-option value="nes">NES</ion-select-option>
+            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="ps">PlayStation</ion-select-option>
+            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+            <ion-select-option value="snes">SNES</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="floating">Floating Input</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Input (placeholder)</ion-label>
+          <ion-input placeholder="Placeholder"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkbox</ion-label>
+          <ion-checkbox slot="start"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Range</ion-label>
+          <ion-range></ion-range>
+        </ion-item>
+      </ion-list>
     </ion-content>
 
     <ion-footer>

core/src/components/item/usage/angular.md

@@ -38,7 +38,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item (click)="buttonClick()">
+<ion-item (click)="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -116,33 +116,37 @@ Item Lines
 <!-- List Full Lines -->
 <ion-list lines="full">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List Inset Lines -->
 <ion-list lines="inset">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List No Lines -->
 <ion-list lines="none">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 2</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>No lines Item 3</ion-label>
   </ion-item>
 </ion-list>
 ```

core/src/components/item/usage/javascript.md

@@ -38,7 +38,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item onclick="buttonClick()">
+<ion-item onclick="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -116,33 +116,37 @@ Item Lines
 <!-- List Full Lines -->
 <ion-list lines="full">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Full Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List Inset Lines -->
 <ion-list lines="inset">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>Inset Lines Item 2</ion-label>
   </ion-item>
 </ion-list>
 
 <!-- List No Lines -->
 <ion-list lines="none">
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 1</ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label>Item</ion-label>
+    <ion-label>No lines Item 2</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>No lines Item 3</ion-label>
   </ion-item>
 </ion-list>
 ```