javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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 11193 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
core/src/components/avatar/readme.md
View File

@ -36,7 +36,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
### React
```tsx
import React from 'react'
import React from 'react';
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
export const AvatarExample: React.FC = () => (
@ -63,6 +63,41 @@ export const AvatarExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'avatar-example',
styleUrl: 'avatar-example.css'
})
export class AvatarExample {
render() {
return [
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>,
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>,
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
];
}
}
```
### Vue
```html

2
core/src/components/avatar/usage/react.md
View File

@ -1,5 +1,5 @@
```tsx
import React from 'react'
import React from 'react';
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
export const AvatarExample: React.FC = () => (

31
core/src/components/avatar/usage/stencil.md Normal file
View File

@ -0,0 +1,31 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'avatar-example',
styleUrl: 'avatar-example.css'
})
export class AvatarExample {
render() {
return [
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>,
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>,
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
];
}
}
```