Skip to content

Commit f8d1103

Browse files
committed
docs(input): add clear input example to demo and update doc to reflect
closes ionic-team/ionic-site#618
1 parent 79a7f2f commit f8d1103

File tree

3 files changed

+38
-25
lines changed

3 files changed

+38
-25
lines changed

demos/input/main.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,8 @@
3333
<ion-input></ion-input>
3434
</ion-item>
3535

36+
<ion-item>
37+
<ion-input placeholder="Clear Input" clearInput></ion-input>
38+
</ion-item>
3639
</ion-list>
3740
</ion-content>

src/components/input/input.ios.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ ion-input[clearInput] {
8080
bottom: 0;
8181

8282
width: $text-input-ios-input-clear-icon-width;
83-
height: 34px;
8483

8584
background-size: $text-input-ios-input-clear-icon-size;
8685
}

src/components/input/input.ts

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,44 @@ import {Platform} from '../../platform/platform';
3030
* `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
3131
*
3232
* @property [type] - The HTML input type (text, password, email, number, search, tel, or url)
33-
* @property [clearInput] - A clear icon will appear in the input which clears it
33+
* @property [clearInput] - A clear icon will appear in the input when there is a value. Clicking it clears the input.
3434
*
3535
* @usage
3636
* ```html
37-
* <ion-item>
38-
* <ion-label>Username</ion-label>
39-
* <ion-input></ion-input>
40-
* </ion-item>
41-
*
42-
* <ion-item>
43-
* <ion-label fixed>Website</ion-label>
44-
* <ion-input type="url"></ion-input>
45-
* </ion-item>
46-
*
47-
* <ion-item>
48-
* <ion-label floating>Email</ion-label>
49-
* <ion-input type="email"></ion-input>
50-
* </ion-item>
51-
*
52-
* <ion-item>
53-
* <ion-label stacked>Phone</ion-label>
54-
* <ion-input type="tel"></ion-input>
55-
* </ion-item>
56-
*
57-
* <ion-item>
58-
* <ion-input placeholder="Username" clearInput></ion-input>
59-
* </ion-item>
37+
* <ion-list>
38+
* <ion-item>
39+
* <ion-label primary>Inline Label</ion-label>
40+
* <ion-input placeholder="Text Input"></ion-input>
41+
* </ion-item>
42+
*
43+
* <ion-item>
44+
* <ion-label primary fixed>Fixed Label</ion-label>
45+
* <ion-input type="tel" placeholder="Tel Input"></ion-input>
46+
* </ion-item>
47+
*
48+
* <ion-item>
49+
* <ion-input type="number" placeholder="Number Input with no label"></ion-input>
50+
* </ion-item>
51+
*
52+
* <ion-item>
53+
* <ion-label primary stacked>Stacked Label</ion-label>
54+
* <ion-input type="email" placeholder="Email Input"></ion-input>
55+
* </ion-item>
56+
*
57+
* <ion-item>
58+
* <ion-label primary stacked>Stacked Label</ion-label>
59+
* <ion-input type="password" placeholder="Password Input"></ion-input>
60+
* </ion-item>
61+
*
62+
* <ion-item>
63+
* <ion-label primary floating>Floating Label</ion-label>
64+
* <ion-input></ion-input>
65+
* </ion-item>
66+
*
67+
* <ion-item>
68+
* <ion-input placeholder="Clear Input" clearInput></ion-input>
69+
* </ion-item>
70+
* </ion-list>
6071
* ```
6172
*
6273
* @demo /docs/v2/demos/input/

0 commit comments

Comments
 (0)