Skip to content

Commit 00a9c73

Browse files
liamdebeasiliamdebeasi
committed
docs(item): add supporting visuals example
1 parent cdce63e commit 00a9c73

File tree

8 files changed

+178
-2
lines changed

8 files changed

+178
-2
lines changed

‎docs/api/item.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import Parts from '@ionic-internal/component-api/v7/item/parts.md';
88
import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
99
import Slots from '@ionic-internal/component-api/v7/item/slots.md';
1010

11+
import useBaseUrl from '@docusaurus/useBaseUrl';
12+
1113
<head>
1214
<title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
1315
<meta name="description" content="ion-item elements for iOS/Android contain text, icons, images, and other custom elements. They're placed in a list and can be input, deleted, edited, and more." />
@@ -25,9 +27,17 @@ Items in a list can support 5 different content types:
2527

2628
### Supporting Visuals
2729

28-
These are decorative icons or other adornments for an item. Since this content is not required to understand the intent of the row, they are typically hidden from screen readers using `aria-hidden="true"`
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"`.
2931

30-
TODO Demo
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.
33+
34+
import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md';
35+
36+
<SupportingVisuals />
37+
38+
The following example shows **incorrect usage** because the icons are not presented in a consistent way.
39+
40+
<img width="300" style={{ margin: '0 auto' }} src={useBaseUrl('img/item/incorrect-usage-visuals.jpg')} />
3141

3242
### Text
3343

‎static/img/item/incorrect-usage-visuals.jpg

41.4 KB
Loading

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-icon aria-hidden="true" name="airplane" slot="start"></ion-icon>
5+
<ion-label>Airplane Mode</ion-label>
6+
</ion-item>
7+
<ion-item>
8+
<ion-icon aria-hidden="true" name="wifi" slot="start"></ion-icon>
9+
<ion-label>Wi-Fi</ion-label>
10+
</ion-item>
11+
<ion-item>
12+
<ion-icon aria-hidden="true" name="bluetooth" slot="start"></ion-icon>
13+
<ion-label>Bluetooth</ion-label>
14+
</ion-item>
15+
<ion-item>
16+
<ion-icon aria-hidden="true" name="call" slot="start"></ion-icon>
17+
<ion-label>Cellular</ion-label>
18+
</ion-item>
19+
</ion-list>
20+
```

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Item</title>
7+
<link rel="stylesheet" href="../../../../common.css" />
8+
<script src="../../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-icon aria-hidden="true" name="airplane" slot="start"></ion-icon>
20+
<ion-label>Airplane Mode</ion-label>
21+
</ion-item>
22+
<ion-item>
23+
<ion-icon aria-hidden="true" name="wifi" slot="start"></ion-icon>
24+
<ion-label>Wi-Fi</ion-label>
25+
</ion-item>
26+
<ion-item>
27+
<ion-icon aria-hidden="true" name="bluetooth" slot="start"></ion-icon>
28+
<ion-label>Bluetooth</ion-label>
29+
</ion-item>
30+
<ion-item>
31+
<ion-icon aria-hidden="true" name="call" slot="start"></ion-icon>
32+
<ion-label>Cellular</ion-label>
33+
</ion-item>
34+
</ion-list>
35+
</div>
36+
</ion-content>
37+
</ion-app>
38+
</body>
39+
</html>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/item/content-types/supporting-visuals/demo.html"
17+
/>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-icon aria-hidden="true" name="airplane" slot="start"></ion-icon>
5+
<ion-label>Airplane Mode</ion-label>
6+
</ion-item>
7+
<ion-item>
8+
<ion-icon aria-hidden="true" name="wifi" slot="start"></ion-icon>
9+
<ion-label>Wi-Fi</ion-label>
10+
</ion-item>
11+
<ion-item>
12+
<ion-icon aria-hidden="true" name="bluetooth" slot="start"></ion-icon>
13+
<ion-label>Bluetooth</ion-label>
14+
</ion-item>
15+
<ion-item>
16+
<ion-icon aria-hidden="true" name="call" slot="start"></ion-icon>
17+
<ion-label>Cellular</ion-label>
18+
</ion-item>
19+
</ion-list>
20+
```

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonLabel, IonList, IonIcon } from '@ionic/react';
4+
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
5+
6+
function Example() {
7+
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>
26+
);
27+
}
28+
export default Example;
29+
```
30+

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-icon aria-hidden="true" :icon="airplane" slot="start"></ion-icon>
6+
<ion-label>Airplane Mode</ion-label>
7+
</ion-item>
8+
<ion-item>
9+
<ion-icon aria-hidden="true" :icon="wifi" slot="start"></ion-icon>
10+
<ion-label>Wi-Fi</ion-label>
11+
</ion-item>
12+
<ion-item>
13+
<ion-icon aria-hidden="true" :icon="bluetooth" slot="start"></ion-icon>
14+
<ion-label>Bluetooth</ion-label>
15+
</ion-item>
16+
<ion-item>
17+
<ion-icon aria-hidden="true" :icon="call" slot="start"></ion-icon>
18+
<ion-label>Cellular</ion-label>
19+
</ion-item>
20+
</ion-list>
21+
</template>
22+
23+
<script lang="ts">
24+
import { IonItem, IonLabel, IonList, IonIcon } from '@ionic/vue';
25+
import { defineComponent } from 'vue';
26+
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
27+
28+
export default defineComponent({
29+
components: {
30+
IonItem,
31+
IonLabel,
32+
IonList,
33+
IonIcon,
34+
},
35+
setup() {
36+
return { airplane, bluetooth, call, wifi }
37+
}
38+
});
39+
</script>
40+
```

0 commit comments

Comments
 (0)