docs(): usage and examples

This commit is contained in:
mhartington
2018-06-18 12:45:06 -04:00
parent 518594bcc4
commit 96945b1ee1
66 changed files with 809 additions and 604 deletions

View File

@ -6,43 +6,6 @@ Unlike the native textarea element, the Ionic textarea does not support loading
The textarea component accepts the [native textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) in addition to the Ionic properties.
```html
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
```
<!-- Auto Generated Below -->

View File

@ -0,0 +1,37 @@
```html
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
```