mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
@ -76,6 +76,47 @@ export const SpinnerExample: React.FC = () => (
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'spinner-example',
|
||||
styleUrl: 'spinner-example.css'
|
||||
})
|
||||
export class SpinnerExample {
|
||||
render() {
|
||||
return [
|
||||
// Default Spinner
|
||||
<ion-spinner></ion-spinner>,
|
||||
|
||||
// Lines
|
||||
<ion-spinner name="lines"></ion-spinner>,
|
||||
|
||||
// Lines Small
|
||||
<ion-spinner name="lines-small"></ion-spinner>,
|
||||
|
||||
// Dots
|
||||
<ion-spinner name="dots"></ion-spinner>,
|
||||
|
||||
// Bubbles
|
||||
<ion-spinner name="bubbles"></ion-spinner>,
|
||||
|
||||
// Circles
|
||||
<ion-spinner name="circles"></ion-spinner>,
|
||||
|
||||
// Crescent
|
||||
<ion-spinner name="crescent"></ion-spinner>,
|
||||
|
||||
// Paused Default Spinner
|
||||
<ion-spinner paused={true}></ion-spinner>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
|
||||
37
core/src/components/spinner/usage/stencil.md
Normal file
37
core/src/components/spinner/usage/stencil.md
Normal file
@ -0,0 +1,37 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'spinner-example',
|
||||
styleUrl: 'spinner-example.css'
|
||||
})
|
||||
export class SpinnerExample {
|
||||
render() {
|
||||
return [
|
||||
// Default Spinner
|
||||
<ion-spinner></ion-spinner>,
|
||||
|
||||
// Lines
|
||||
<ion-spinner name="lines"></ion-spinner>,
|
||||
|
||||
// Lines Small
|
||||
<ion-spinner name="lines-small"></ion-spinner>,
|
||||
|
||||
// Dots
|
||||
<ion-spinner name="dots"></ion-spinner>,
|
||||
|
||||
// Bubbles
|
||||
<ion-spinner name="bubbles"></ion-spinner>,
|
||||
|
||||
// Circles
|
||||
<ion-spinner name="circles"></ion-spinner>,
|
||||
|
||||
// Crescent
|
||||
<ion-spinner name="crescent"></ion-spinner>,
|
||||
|
||||
// Paused Default Spinner
|
||||
<ion-spinner paused={true}></ion-spinner>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user