Skip to content

Commit edc0686

Browse files
liamdebeasiliamdebeasi
authored
docs(img): add playground (#2624)
1 parent 2223ccb commit edc0686

File tree

7 files changed

+73
-148
lines changed

7 files changed

+73
-148
lines changed

‎docs/api/img.md

Lines changed: 4 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
---
22
title: "ion-img"
3-
hide_table_of_contents: true
43
---
5-
import Tabs from '@theme/Tabs';
6-
import TabItem from '@theme/TabItem';
7-
import TOCInline from '@theme/TOCInline';
84

95
import Props from '@site/static/auto-generated/img/props.md';
106
import Events from '@site/static/auto-generated/img/events.md';
@@ -22,154 +18,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2218

2319
<EncapsulationPill type="shadow" />
2420

25-
<h2 className="table-of-contents__title">Contents</h2>
2621

27-
<TOCInline
28-
toc={toc}
29-
maxHeadingLevel={2}
30-
/>
22+
Img is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browsers, but falls back to a `setTimeout` when it is not supported.
3123

24+
## Basic Usage
3225

26+
import Basic from '@site/static/usage/img/basic/index.md';
3327

34-
Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported.
35-
36-
37-
38-
39-
## Usage
40-
41-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
42-
43-
<TabItem value="angular">
44-
45-
```html
46-
<ion-list>
47-
<ion-item *ngFor="let item of items">
48-
<ion-thumbnail slot="start">
49-
<ion-img [src]="item.src"></ion-img>
50-
</ion-thumbnail>
51-
<ion-label>{{item.text}}</ion-label>
52-
</ion-item>
53-
</ion-list>
54-
```
55-
56-
57-
</TabItem>
58-
59-
60-
<TabItem value="react">
61-
62-
```tsx
63-
import React from 'react';
64-
import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react';
65-
66-
type Item = {
67-
src: string;
68-
text: string;
69-
};
70-
const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
71-
72-
export const ImgExample: React.FC = () => (
73-
<IonContent>
74-
<IonList>
75-
{items.map((image, i) => (
76-
<IonItem key={i}>
77-
<IonThumbnail slot="start">
78-
<IonImg src={image.src} />
79-
</IonThumbnail>
80-
<IonLabel>{image.text}</IonLabel>
81-
</IonItem>
82-
))}
83-
</IonList>
84-
</IonContent>
85-
);
86-
```
87-
88-
</TabItem>
89-
90-
91-
<TabItem value="stencil">
92-
93-
```tsx
94-
import { Component, h } from '@stencil/core';
95-
96-
@Component({
97-
tag: 'img-example',
98-
styleUrl: 'img-example.css'
99-
})
100-
export class ImgExample {
101-
private items = [{
102-
'text': 'Item 1',
103-
'src': '/path/to/external/file.png'
104-
}, {
105-
'text': 'Item 2',
106-
'src': '/path/to/external/file.png'
107-
}, {
108-
'text': 'Item 3',
109-
'src': '/path/to/external/file.png'
110-
}];
111-
112-
render() {
113-
return [
114-
<ion-list>
115-
{this.items.map(item =>
116-
<ion-item>
117-
<ion-thumbnail slot="start">
118-
<ion-img src={item.src}></ion-img>
119-
</ion-thumbnail>
120-
<ion-label>{item.text}</ion-label>
121-
</ion-item>
122-
)}
123-
</ion-list>
124-
];
125-
}
126-
}
127-
```
128-
129-
</TabItem>
130-
131-
132-
<TabItem value="vue">
133-
134-
```html
135-
<template>
136-
<ion-list>
137-
<ion-item v-for="item in items" :key="item.src">
138-
<ion-thumbnail slot="start">
139-
<ion-img :src="item.src"></ion-img>
140-
</ion-thumbnail>
141-
<ion-label>{{item.text}}</ion-label>
142-
</ion-item>
143-
</ion-list>
144-
</template>
145-
146-
<script>
147-
import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
148-
import { defineComponent } from 'vue';
149-
150-
export default defineComponent({
151-
components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
152-
setup() {
153-
const items = [{
154-
'text': 'Item 1',
155-
'src': '/path/to/external/file.png'
156-
}, {
157-
'text': 'Item 2',
158-
'src': '/path/to/external/file.png'
159-
}, {
160-
'text': 'Item 3',
161-
'src': '/path/to/external/file.png'
162-
}];
163-
return { items }
164-
}
165-
});
166-
</script>
167-
```
168-
169-
170-
</TabItem>
171-
172-
</Tabs>
28+
<Basic />
17329

17430
## Properties
17531
<Props />

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
3+
```

‎static/usage/img/basic/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>Image</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+
<style>
14+
ion-img {
15+
width: 300px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<ion-app>
22+
<ion-content>
23+
<div class="container">
24+
<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
30+
</html>

‎static/usage/img/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/img/basic/demo.html" />

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
3+
```

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonImg } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonImg src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></IonImg>
8+
);
9+
}
10+
export default Example;
11+
```

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-img src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonImg } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonImg },
12+
});
13+
</script>
14+
```

0 commit comments

Comments
 (0)