docs(usage): add usage docs for avatar, text, thumbnail

This commit is contained in:
Brandy Carney
2018-04-05 13:02:52 -04:00
parent 5e0965260f
commit 6072a6e5ac
9 changed files with 120 additions and 63 deletions

View File

@ -4,18 +4,6 @@ Thumbnails are square components that usually wrap an image or icon. They can be
Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
```html
<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>
```
<!-- Auto Generated Below -->

View File

@ -0,0 +1,12 @@
```html
<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>
```

View File

@ -0,0 +1,12 @@
```html
<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>
```