javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +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

32
core/src/components/progress-bar/readme.md
View File

@ -68,6 +68,38 @@ export const ProgressbarExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'progress-bar-example',
styleUrl: 'progress-bar-example.css'
})
export class ProgressBarExample {
render() {
return [
// Default Progressbar
<ion-progress-bar></ion-progress-bar>,
// Default Progressbar with 50 percent
<ion-progress-bar value={0.5}></ion-progress-bar>,
// Colorize Progressbar
<ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
<ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,
// Other types
<ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
<ion-progress-bar type="indeterminate"></ion-progress-bar>,
<ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
];
}
}
```
### Vue
```html

28
core/src/components/progress-bar/usage/stencil.md Normal file
View File

@ -0,0 +1,28 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'progress-bar-example',
styleUrl: 'progress-bar-example.css'
})
export class ProgressBarExample {
render() {
return [
// Default Progressbar
<ion-progress-bar></ion-progress-bar>,
// Default Progressbar with 50 percent
<ion-progress-bar value={0.5}></ion-progress-bar>,
// Colorize Progressbar
<ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
<ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,
// Other types
<ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
<ion-progress-bar type="indeterminate"></ion-progress-bar>,
<ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
];
}
}
```