javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(avatar): update avatar documentation

Browse Source
This commit is contained in:
Brandy Carney
2018-01-08 11:32:38 -05:00
parent 06c9377192
commit 22df9c501f
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/core/src/components/avatar/readme.md
View File

@ -1,7 +1,28 @@
# ion-avatar # ion-avatar
An Avatar is a component that creates a circular image for an item. 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 placed on the left or right side of an item with the `item-start` or `item-end` directive.
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.
```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>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->