Skip to content

Commit fe84d51

Browse files
brandyscarneybrandyscarney
authored
docs(avatar): add component playgrounds and new svg (#2524)
1 parent 01dd2f5 commit fe84d51

35 files changed

+448
-175
lines changed

‎docs/api/avatar.md

Lines changed: 13 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
22
title: "ion-avatar"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/avatar/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
94

105
import Props from '@site/static/auto-generated/avatar/props.md';
116
import Events from '@site/static/auto-generated/avatar/events.md';
@@ -20,186 +15,36 @@ import Slots from '@site/static/auto-generated/avatar/slots.md';
2015
</head>
2116

2217
import EncapsulationPill from '@components/page/api/EncapsulationPill';
23-
import APITOCInline from '@components/page/api/APITOCInline';
2418

2519
<EncapsulationPill type="shadow" />
2620

27-
<h2 className="table-of-contents__title">Contents</h2>
28-
29-
<APITOCInline
30-
toc={toc}
31-
maxHeadingLevel={2}
32-
autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
33-
/>
34-
35-
36-
3721
Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
3822

3923
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.
4024

25+
## Basic
4126

27+
import Basic from '@site/static/usage/avatar/basic/index.md';
4228

29+
<Basic />
4330

44-
## Usage
31+
## Chip Avatar
4532

46-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
33+
import Chip from '@site/static/usage/avatar/chip/index.md';
4734

48-
<TabItem value="angular">
35+
<Chip />
4936

50-
```html
51-
<ion-avatar>
52-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
53-
</ion-avatar>
37+
## Item Avatar
5438

55-
<ion-chip>
56-
<ion-avatar>
57-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
58-
</ion-avatar>
59-
<ion-label>Chip Avatar</ion-label>
60-
</ion-chip>
61-
62-
<ion-item>
63-
<ion-avatar slot="start">
64-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
65-
</ion-avatar>
66-
<ion-label>Item Avatar</ion-label>
67-
</ion-item>
68-
```
39+
import Item from '@site/static/usage/avatar/item/index.md';
6940

70-
</TabItem>
41+
<Item />
7142

43+
## Theming
7244

73-
<TabItem value="javascript">
45+
import Theming from '@site/static/usage/avatar/theming/index.md';
7446

75-
```html
76-
<ion-avatar>
77-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
78-
</ion-avatar>
79-
80-
<ion-chip>
81-
<ion-avatar>
82-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
83-
</ion-avatar>
84-
<ion-label>Chip Avatar</ion-label>
85-
</ion-chip>
86-
87-
<ion-item>
88-
<ion-avatar slot="start">
89-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
90-
</ion-avatar>
91-
<ion-label>Item Avatar</ion-label>
92-
</ion-item>
93-
```
94-
95-
</TabItem>
96-
97-
98-
<TabItem value="react">
99-
100-
```tsx
101-
import React from 'react';
102-
import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
103-
104-
export const AvatarExample: React.FC = () => (
105-
<IonContent>
106-
<IonAvatar>
107-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
108-
</IonAvatar>
109-
110-
<IonChip>
111-
<IonAvatar>
112-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
113-
</IonAvatar>
114-
<IonLabel>Chip Avatar</IonLabel>
115-
</IonChip>
116-
117-
<IonItem>
118-
<IonAvatar slot="start">
119-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
120-
</IonAvatar>
121-
<IonLabel>Item Avatar</IonLabel>
122-
</IonItem>
123-
</IonContent>
124-
);
125-
```
126-
127-
</TabItem>
128-
129-
130-
<TabItem value="stencil">
131-
132-
```tsx
133-
import { Component, h } from '@stencil/core';
134-
135-
@Component({
136-
tag: 'avatar-example',
137-
styleUrl: 'avatar-example.css'
138-
})
139-
export class AvatarExample {
140-
render() {
141-
return [
142-
<ion-avatar>
143-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
144-
</ion-avatar>,
145-
146-
<ion-chip>
147-
<ion-avatar>
148-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
149-
</ion-avatar>
150-
<ion-label>Chip Avatar</ion-label>
151-
</ion-chip>,
152-
153-
<ion-item>
154-
<ion-avatar slot="start">
155-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
156-
</ion-avatar>
157-
<ion-label>Item Avatar</ion-label>
158-
</ion-item>
159-
];
160-
}
161-
}
162-
```
163-
164-
</TabItem>
165-
166-
167-
<TabItem value="vue">
168-
169-
```html
170-
<template>
171-
<ion-avatar>
172-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
173-
</ion-avatar>
174-
175-
<ion-chip>
176-
<ion-avatar>
177-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
178-
</ion-avatar>
179-
<ion-label>Chip Avatar</ion-label>
180-
</ion-chip>
181-
182-
<ion-item>
183-
<ion-avatar slot="start">
184-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
185-
</ion-avatar>
186-
<ion-label>Item Avatar</ion-label>
187-
</ion-item>
188-
</template>
189-
190-
<script>
191-
import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
192-
import { defineComponent } from 'vue';
193-
194-
export default defineComponent({
195-
components: { IonAvatar, IonChip, IonItem, IonLabel }
196-
});
197-
</script>
198-
```
199-
200-
</TabItem>
201-
202-
</Tabs>
47+
<Theming />
20348

20449
## Properties
20550
<Props />
@@ -217,4 +62,4 @@ export default defineComponent({
21762
<CustomProps />
21863

21964
## Slots
220-
<Slots />
65+
<Slots />

‎static/demos/api/avatar/avatar.svg

Lines changed: 12 additions & 1 deletion
Loading

‎static/img/avatar.svg

Lines changed: 12 additions & 1 deletion
Loading

‎static/usage/avatar/basic/angular.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-avatar>
3+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
4+
</ion-avatar>
5+
```

‎static/usage/avatar/basic/demo.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Avatar</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-content>
18+
<div class="container">
19+
<ion-avatar>
20+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
21+
</ion-avatar>
22+
</div>
23+
</ion-content>
24+
</ion-app>
25+
</body>
26+
27+
</html>

‎static/usage/avatar/basic/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/basic/demo.html" />

‎static/usage/avatar/basic/javascript.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-avatar>
3+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
4+
</ion-avatar>
5+
```

‎static/usage/avatar/basic/react.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonAvatar } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonAvatar>
9+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
10+
</IonAvatar>
11+
</>
12+
);
13+
}
14+
export default Example;
15+
```

‎static/usage/avatar/basic/vue.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```html
2+
<template>
3+
<ion-avatar>
4+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
5+
</ion-avatar>
6+
</template>
7+
8+
<script lang="ts">
9+
import { IonAvatar } from '@ionic/vue';
10+
import { defineComponent } from 'vue';
11+
12+
export default defineComponent({
13+
components: { IonAvatar },
14+
});
15+
</script>
16+
```

‎static/usage/avatar/chip/angular.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```html
2+
<ion-chip>
3+
<ion-avatar>
4+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
5+
</ion-avatar>
6+
<ion-label>Chip Avatar</ion-label>
7+
</ion-chip>
8+
```

‎static/usage/avatar/chip/demo.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Avatar</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-content>
18+
<div class="container">
19+
<ion-chip>
20+
<ion-avatar>
21+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
22+
</ion-avatar>
23+
<ion-label>Chip Avatar</ion-label>
24+
</ion-chip>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
30+
</html>

‎static/usage/avatar/chip/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/chip/demo.html" />

‎static/usage/avatar/chip/javascript.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```html
2+
<ion-chip>
3+
<ion-avatar>
4+
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
5+
</ion-avatar>
6+
<ion-label>Chip Avatar</ion-label>
7+
</ion-chip>
8+
```

0 commit comments

Comments
 (0)