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

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

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

55
core/src/components/input/usage/stencil.md Normal file
View File

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