mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
chore(docs): remove manual documentation (#24984)
This commit is contained in:
Sean Perkins
@ -1,145 +0,0 @@
|
||||
# ion-avatar
|
||||
|
||||
Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
|
||||
|
||||
Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Angular / javascript
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
|
||||
|
||||
export const AvatarExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonAvatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
|
||||
<IonChip>
|
||||
<IonAvatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
<IonLabel>Chip Avatar</IonLabel>
|
||||
</IonChip>
|
||||
|
||||
<IonItem>
|
||||
<IonAvatar slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
<IonLabel>Item Avatar</IonLabel>
|
||||
</IonItem>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### 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
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { IonAvatar, IonChip, IonItem, IonLabel }
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | ------------------------------------------- |
|
||||
| `--border-radius` | Border radius of the avatar and inner image |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,19 +0,0 @@
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
@ -1,19 +0,0 @@
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
@ -1,26 +0,0 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
|
||||
|
||||
export const AvatarExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonAvatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
|
||||
<IonChip>
|
||||
<IonAvatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
<IonLabel>Chip Avatar</IonLabel>
|
||||
</IonChip>
|
||||
|
||||
<IonItem>
|
||||
<IonAvatar slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
|
||||
</IonAvatar>
|
||||
<IonLabel>Item Avatar</IonLabel>
|
||||
</IonItem>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
@ -1,31 +0,0 @@
|
||||
```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>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,30 +0,0 @@
|
||||
```html
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { IonAvatar, IonChip, IonItem, IonLabel }
|
||||
});
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user