javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(input): update documentation and add usage

Browse Source
This commit is contained in:
Brandy Carney
2018-07-09 17:50:02 -04:00
parent 6c12434f80
commit 1fffdc4055
3 changed files with 89 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/input/readme.md
View File

@ -1,6 +1,8 @@
# ion-input # ion-input
Input is a component similar to the HTML input element. It accepts most of the standard properties/attributes as the HTML input, but is styled to fit Ionic's UI. The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

43
core/src/components/input/usage/angular.md Normal file
View File

@ -0,0 +1,43 @@
```html
<!-- Default Input -->
<ion-input></ion-input>
<!-- Input with value -->
<ion-input value="custom"></ion-input>
<!-- Input with placeholder -->
<ion-input placeholder="Enter Input"></ion-input>
<!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input>
<!-- Number type input -->
<ion-input type="number" value="333"></ion-input>
<!-- Disabled input -->
<ion-input value="Disabled" disabled></ion-input>
<!-- Readonly input -->
<ion-input value="Readonly" readonly></ion-input>
<!-- Inputs with labels -->
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input></ion-input>
</ion-item>
```

43
core/src/components/input/usage/javascript.md Normal file
View File

@ -0,0 +1,43 @@
```html
<!-- Default Input -->
<ion-input></ion-input>
<!-- Input with value -->
<ion-input value="custom"></ion-input>
<!-- Input with placeholder -->
<ion-input placeholder="Enter Input"></ion-input>
<!-- Input with clear button when there is a value -->
<ion-input clear-input value="clear me"></ion-input>
<!-- Number type input -->
<ion-input type="number" value="333"></ion-input>
<!-- Disabled input -->
<ion-input value="Disabled" disabled></ion-input>
<!-- Readonly input -->
<ion-input value="Readonly" readonly></ion-input>
<!-- Inputs with labels -->
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input></ion-input>
</ion-item>
```