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

49
core/src/components/range/readme.md
View File

@@ -165,6 +165,55 @@ export const RangeExamples: React.FC = () => {
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'range-example',
styleUrl: 'range-example.css'
})
export class RangeExample {
render() {
return [
<ion-list>
<ion-item>
<ion-range color="danger" pin={true}></ion-range>
</ion-item>
<ion-item>
<ion-range min={-200} max={200} color="secondary">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range min={20} max={80} step={2}>
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min={1000} max={2000} step={100} snaps={true} color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range dualKnobs={true} min={21} max={72} step={3} snaps={true}></ion-range>
</ion-item>
</ion-list>
];
}
}
```
### Vue
```html

45
core/src/components/range/usage/stencil.md Normal file
View File

@@ -0,0 +1,45 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'range-example',
styleUrl: 'range-example.css'
})
export class RangeExample {
render() {
return [
<ion-list>
<ion-item>
<ion-range color="danger" pin={true}></ion-range>
</ion-item>
<ion-item>
<ion-range min={-200} max={200} color="secondary">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range min={20} max={80} step={2}>
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min={1000} max={2000} step={100} snaps={true} color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range dualKnobs={true} min={21} max={72} step={3} snaps={true}></ion-range>
</ion-item>
</ion-list>
];
}
}
```