Skip to content

Commit 05ee5c6

Browse files
liamdebeasiliamdebeasi
committed
docs(item): update visaul example, remove media and icon playgrounds
1 parent 00a9c73 commit 05ee5c6

File tree

6 files changed

+161
-41
lines changed

6 files changed

+161
-41
lines changed

‎docs/api/item.md

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ Items in a list can support 5 different content types:
2727

2828
### Supporting Visuals
2929

30-
These are decorative icons or other adornments for an item. Since this content is not required to understand the intent of the row, it is typically hidden from screen readers using `aria-hidden="true"`.
30+
These are decorative icons or other adornments for an item. Common examples of supporting visuals are [Avatars](./avatar), [Icons](./icon), and [Thumbnails](./thumbnail). Since this content is not required to understand the intent of the row, it is typically hidden from screen readers using `aria-hidden="true"`.
3131

32-
In the example below, we are creating a list with several decorative icons. Since the icons are decorative, they all have `aria-hidden="true"`. Additionally, they are presented consistently in the `start` slot.
32+
In the example below, we are creating two lists with supporting visuals. The first list uses icons, and the second list uses avatars. The visuals are decorative, so they all have `aria-hidden="true"`. Additionally, they are presented consistently in the `start` slot.
3333

3434
import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md';
3535

@@ -119,16 +119,6 @@ import Lines from '@site/static/usage/v7/item/lines/index.md';
119119

120120
<Lines />
121121

122-
123-
## Media Items
124-
125-
[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
126-
127-
import Media from '@site/static/usage/v7/item/media/index.md';
128-
129-
<Media />
130-
131-
132122
## Buttons in Items
133123

134124
Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`.
@@ -137,14 +127,6 @@ import Buttons from '@site/static/usage/v7/item/buttons/index.md';
137127

138128
<Buttons />
139129

140-
141-
## Icons in Items
142-
143-
import Icons from '@site/static/usage/v7/item/icons/index.md';
144-
145-
<Icons />
146-
147-
148130
## Item Inputs
149131

150132
import Inputs from '@site/static/usage/v7/item/inputs/index.md';

‎static/usage/v7/item/content-types/supporting-visuals/angular.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,31 @@
1717
<ion-label>Cellular</ion-label>
1818
</ion-item>
1919
</ion-list>
20+
21+
<ion-list>
22+
<ion-item>
23+
<ion-avatar aria-hidden="true" slot="start">
24+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
25+
</ion-avatar>
26+
<ion-label>Huey</ion-label>
27+
</ion-item>
28+
<ion-item>
29+
<ion-avatar aria-hidden="true" slot="start">
30+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
31+
</ion-avatar>
32+
<ion-label>Dewey</ion-label>
33+
</ion-item>
34+
<ion-item>
35+
<ion-avatar aria-hidden="true" slot="start">
36+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
37+
</ion-avatar>
38+
<ion-label>Louie</ion-label>
39+
</ion-item>
40+
<ion-item>
41+
<ion-avatar aria-hidden="true" slot="start">
42+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
43+
</ion-avatar>
44+
<ion-label>Fooie</ion-label>
45+
</ion-item>
46+
</ion-list>
2047
```

‎static/usage/v7/item/content-types/supporting-visuals/demo.html

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<ion-app>
1515
<ion-content>
1616
<div class="container">
17-
<ion-list>
17+
<ion-list style="width: 40%">
1818
<ion-item>
1919
<ion-icon aria-hidden="true" name="airplane" slot="start"></ion-icon>
2020
<ion-label>Airplane Mode</ion-label>
@@ -32,6 +32,33 @@
3232
<ion-label>Cellular</ion-label>
3333
</ion-item>
3434
</ion-list>
35+
36+
<ion-list style="width: 40%">
37+
<ion-item>
38+
<ion-avatar aria-hidden="true" slot="start">
39+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
40+
</ion-avatar>
41+
<ion-label>Huey</ion-label>
42+
</ion-item>
43+
<ion-item>
44+
<ion-avatar aria-hidden="true" slot="start">
45+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
46+
</ion-avatar>
47+
<ion-label>Dewey</ion-label>
48+
</ion-item>
49+
<ion-item>
50+
<ion-avatar aria-hidden="true" slot="start">
51+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
52+
</ion-avatar>
53+
<ion-label>Louie</ion-label>
54+
</ion-item>
55+
<ion-item>
56+
<ion-avatar aria-hidden="true" slot="start">
57+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
58+
</ion-avatar>
59+
<ion-label>Fooie</ion-label>
60+
</ion-item>
61+
</ion-list>
3562
</div>
3663
</ion-content>
3764
</ion-app>

‎static/usage/v7/item/content-types/supporting-visuals/javascript.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,31 @@
1717
<ion-label>Cellular</ion-label>
1818
</ion-item>
1919
</ion-list>
20+
21+
<ion-list>
22+
<ion-item>
23+
<ion-avatar aria-hidden="true" slot="start">
24+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
25+
</ion-avatar>
26+
<ion-label>Huey</ion-label>
27+
</ion-item>
28+
<ion-item>
29+
<ion-avatar aria-hidden="true" slot="start">
30+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
31+
</ion-avatar>
32+
<ion-label>Dewey</ion-label>
33+
</ion-item>
34+
<ion-item>
35+
<ion-avatar aria-hidden="true" slot="start">
36+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
37+
</ion-avatar>
38+
<ion-label>Louie</ion-label>
39+
</ion-item>
40+
<ion-item>
41+
<ion-avatar aria-hidden="true" slot="start">
42+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
43+
</ion-avatar>
44+
<ion-label>Fooie</ion-label>
45+
</ion-item>
46+
</ion-list>
2047
```

‎static/usage/v7/item/content-types/supporting-visuals/react.md

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,57 @@
11
```tsx
22
import React from 'react';
3-
import { IonItem, IonLabel, IonList, IonIcon } from '@ionic/react';
3+
import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/react';
44
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
55

66
function Example() {
77
return (
8-
<IonList>
9-
<IonItem>
10-
<IonIcon aria-hidden="true" icon={airplane} slot="start"></IonIcon>
11-
<IonLabel>Airplane Mode</IonLabel>
12-
</IonItem>
13-
<IonItem>
14-
<IonIcon aria-hidden="true" icon={wifi} slot="start"></IonIcon>
15-
<IonLabel>Wi-Fi</IonLabel>
16-
</IonItem>
17-
<IonItem>
18-
<IonIcon aria-hidden="true" icon={bluetooth} slot="start"></IonIcon>
19-
<IonLabel>Bluetooth</IonLabel>
20-
</IonItem>
21-
<IonItem>
22-
<IonIcon aria-hidden="true" icon={call} slot="start"></IonIcon>
23-
<IonLabel>Cellular</IonLabel>
24-
</IonItem>
25-
</IonList>
8+
<>
9+
<IonList>
10+
<IonItem>
11+
<IonIcon aria-hidden="true" icon={airplane} slot="start"></IonIcon>
12+
<IonLabel>Airplane Mode</IonLabel>
13+
</IonItem>
14+
<IonItem>
15+
<IonIcon aria-hidden="true" icon={wifi} slot="start"></IonIcon>
16+
<IonLabel>Wi-Fi</IonLabel>
17+
</IonItem>
18+
<IonItem>
19+
<IonIcon aria-hidden="true" icon={bluetooth} slot="start"></IonIcon>
20+
<IonLabel>Bluetooth</IonLabel>
21+
</IonItem>
22+
<IonItem>
23+
<IonIcon aria-hidden="true" icon={call} slot="start"></IonIcon>
24+
<IonLabel>Cellular</IonLabel>
25+
</IonItem>
26+
</IonList>
27+
28+
<IonList>
29+
<IonItem>
30+
<IonAvatar aria-hidden="true" slot="start">
31+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
32+
</IonAvatar>
33+
<IonLabel>Huey</IonLabel>
34+
</IonItem>
35+
<IonItem>
36+
<IonAvatar aria-hidden="true" slot="start">
37+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
38+
</IonAvatar>
39+
<IonLabel>Dewey</IonLabel>
40+
</IonItem>
41+
<IonItem>
42+
<IonAvatar aria-hidden="true" slot="start">
43+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
44+
</IonAvatar>
45+
<IonLabel>Louie</IonLabel>
46+
</IonItem>
47+
<IonItem>
48+
<IonAvatar aria-hidden="true" slot="start">
49+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
50+
</IonAvatar>
51+
<IonLabel>Fooie</IonLabel>
52+
</IonItem>
53+
</IonList>
54+
</>
2655
);
2756
}
2857
export default Example;

‎static/usage/v7/item/content-types/supporting-visuals/vue.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,43 @@
1818
<ion-label>Cellular</ion-label>
1919
</ion-item>
2020
</ion-list>
21+
22+
<ion-list>
23+
<ion-item>
24+
<ion-avatar aria-hidden="true" slot="start">
25+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
26+
</ion-avatar>
27+
<ion-label>Huey</ion-label>
28+
</ion-item>
29+
<ion-item>
30+
<ion-avatar aria-hidden="true" slot="start">
31+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
32+
</ion-avatar>
33+
<ion-label>Dewey</ion-label>
34+
</ion-item>
35+
<ion-item>
36+
<ion-avatar aria-hidden="true" slot="start">
37+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
38+
</ion-avatar>
39+
<ion-label>Louie</ion-label>
40+
</ion-item>
41+
<ion-item>
42+
<ion-avatar aria-hidden="true" slot="start">
43+
<img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
44+
</ion-avatar>
45+
<ion-label>Fooie</ion-label>
46+
</ion-item>
47+
</ion-list>
2148
</template>
2249

2350
<script lang="ts">
24-
import { IonItem, IonLabel, IonList, IonIcon } from '@ionic/vue';
51+
import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/vue';
2552
import { defineComponent } from 'vue';
2653
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
2754
2855
export default defineComponent({
2956
components: {
57+
IonAvatar,
3058
IonItem,
3159
IonLabel,
3260
IonList,

0 commit comments

Comments
 (0)