javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(input): add clear input example to demo and update doc to reflect

Browse Source 
closes driftyco/ionic-site#618
This commit is contained in:
Brandy Carney
2016-06-02 15:35:05 -04:00
parent 79a7f2fcb6
commit f8d1103eca
3 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demos/input/main.html
View File

@ -33,5 +33,8 @@
<ion-input></ion-input> <ion-input></ion-input>
</ion-item> </ion-item>
<ion-item>
<ion-input placeholder="Clear Input" clearInput></ion-input>
</ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

1
src/components/input/input.ios.scss
View File

@ -80,7 +80,6 @@ ion-input[clearInput] {
bottom: 0; bottom: 0;
width: $text-input-ios-input-clear-icon-width; width: $text-input-ios-input-clear-icon-width;
height: 34px;
background-size: $text-input-ios-input-clear-icon-size; background-size: $text-input-ios-input-clear-icon-size;
} }

51
src/components/input/input.ts
View File

@ -30,33 +30,44 @@ import {Platform} from '../../platform/platform';
* `checkbox`, `radio`, `toggle`, `range`, `select`, etc. * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
* *
* @property [type] - The HTML input type (text, password, email, number, search, tel, or url) * @property [type] - The HTML input type (text, password, email, number, search, tel, or url)
* @property [clearInput] - A clear icon will appear in the input which clears it * @property [clearInput] - A clear icon will appear in the input when there is a value. Clicking it clears the input.
* *
* @usage * @usage
* ```html * ```html
* <ion-item> * <ion-list>
* <ion-label>Username</ion-label> * <ion-item>
* <ion-input></ion-input> * <ion-label primary>Inline Label</ion-label>
* </ion-item> * <ion-input placeholder="Text Input"></ion-input>
* </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-label fixed>Website</ion-label> * <ion-label primary fixed>Fixed Label</ion-label>
* <ion-input type="url"></ion-input> * <ion-input type="tel" placeholder="Tel Input"></ion-input>
* </ion-item> * </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-label floating>Email</ion-label> * <ion-input type="number" placeholder="Number Input with no label"></ion-input>
* <ion-input type="email"></ion-input> * </ion-item>
* </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-label stacked>Phone</ion-label> * <ion-label primary stacked>Stacked Label</ion-label>
* <ion-input type="tel"></ion-input> * <ion-input type="email" placeholder="Email Input"></ion-input>
* </ion-item> * </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-input placeholder="Username" clearInput></ion-input> * <ion-label primary stacked>Stacked Label</ion-label>
* </ion-item> * <ion-input type="password" placeholder="Password Input"></ion-input>
* </ion-item>
*
* <ion-item>
* <ion-label primary floating>Floating Label</ion-label>
* <ion-input></ion-input>
* </ion-item>
*
* <ion-item>
* <ion-input placeholder="Clear Input" clearInput></ion-input>
* </ion-item>
* </ion-list>
* ``` * ```
* *
* @demo /docs/v2/demos/input/ * @demo /docs/v2/demos/input/