javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11207 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
core/src/components/textarea/readme.md
View File

@@ -158,6 +158,59 @@ export const TextAreaExamples: React.FC = () => {
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'textarea-example',
styleUrl: 'textarea-example.css'
})
export class TextareaExample {
render() {
return [
// 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 clearOnEdit={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>
];
}
}
```
### Vue
```html

49
core/src/components/textarea/usage/stencil.md Normal file
View File

@@ -0,0 +1,49 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'textarea-example',
styleUrl: 'textarea-example.css'
})
export class TextareaExample {
render() {
return [
// 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 clearOnEdit={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>
];
}
}
```