mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
docs(): usage and examples
This commit is contained in:
@ -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 -->
|
||||
|
||||
37
core/src/components/textarea/usage/javascript.md
Normal file
37
core/src/components/textarea/usage/javascript.md
Normal 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>
|
||||
```
|
||||
Reference in New Issue
Block a user