mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
@ -49,6 +49,34 @@ export const ThumbnailExample: React.FC = () => (
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'thumbnail-example',
|
||||
styleUrl: 'thumbnail-example.css'
|
||||
})
|
||||
export class ThumbnailExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-thumbnail>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
|
||||
</ion-thumbnail>,
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
|
||||
24
core/src/components/thumbnail/usage/stencil.md
Normal file
24
core/src/components/thumbnail/usage/stencil.md
Normal file
@ -0,0 +1,24 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'thumbnail-example',
|
||||
styleUrl: 'thumbnail-example.css'
|
||||
})
|
||||
export class ThumbnailExample {
|
||||
render() {
|
||||
return [
|
||||
<ion-thumbnail>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
|
||||
</ion-thumbnail>,
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user