mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
28
core/src/components/progress-bar/usage/stencil.md
Normal file
28
core/src/components/progress-bar/usage/stencil.md
Normal 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>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user