Skip to content

Commit 9f35d78

Browse files
brandyscarneybrandyscarney
authored
docs(thumbnail): add component playgrounds and new svg (#2525)
1 parent fe84d51 commit 9f35d78

24 files changed

+345
-140
lines changed

‎docs/api/thumbnail.md

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

105
import Props from '@site/static/auto-generated/thumbnail/props.md';
116
import Events from '@site/static/auto-generated/thumbnail/events.md';
@@ -20,153 +15,30 @@ import Slots from '@site/static/auto-generated/thumbnail/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
Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
3822

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

25+
## Basic
4126

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

29+
<Basic />
4330

44-
## Usage
45-
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' }]}>
47-
48-
<TabItem value="angular">
49-
50-
```html
51-
<ion-thumbnail>
52-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
53-
</ion-thumbnail>
54-
55-
<ion-item>
56-
<ion-thumbnail slot="start">
57-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
58-
</ion-thumbnail>
59-
<ion-label>Item Thumbnail</ion-label>
60-
</ion-item>
61-
```
62-
63-
</TabItem>
64-
65-
66-
<TabItem value="javascript">
67-
68-
```html
69-
<ion-thumbnail>
70-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
71-
</ion-thumbnail>
72-
73-
<ion-item>
74-
<ion-thumbnail slot="start">
75-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
76-
</ion-thumbnail>
77-
<ion-label>Item Thumbnail</ion-label>
78-
</ion-item>
79-
```
80-
81-
</TabItem>
82-
83-
84-
<TabItem value="react">
85-
86-
```tsx
87-
import React from 'react';
88-
import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';
89-
90-
export const ThumbnailExample: React.FC = () => (
91-
<IonContent>
92-
<IonThumbnail>
93-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
94-
</IonThumbnail>
95-
96-
<IonItem>
97-
<IonThumbnail slot="start">
98-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
99-
</IonThumbnail>
100-
<IonLabel>Item Thumbnail</IonLabel>
101-
</IonItem>
102-
</IonContent>
103-
);
104-
```
105-
106-
107-
</TabItem>
108-
109-
110-
<TabItem value="stencil">
111-
112-
```tsx
113-
import { Component, h } from '@stencil/core';
114-
115-
@Component({
116-
tag: 'thumbnail-example',
117-
styleUrl: 'thumbnail-example.css'
118-
})
119-
export class ThumbnailExample {
120-
render() {
121-
return [
122-
<ion-thumbnail>
123-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
124-
</ion-thumbnail>,
125-
126-
<ion-item>
127-
<ion-thumbnail slot="start">
128-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
129-
</ion-thumbnail>
130-
<ion-label>Item Thumbnail</ion-label>
131-
</ion-item>
132-
];
133-
}
134-
}
135-
```
136-
137-
138-
</TabItem>
139-
140-
141-
<TabItem value="vue">
142-
143-
```html
144-
<template>
145-
<ion-thumbnail>
146-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
147-
</ion-thumbnail>
31+
## Item Thumbnails
14832

149-
<ion-item>
150-
<ion-thumbnail slot="start">
151-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
152-
</ion-thumbnail>
153-
<ion-label>Item Thumbnail</ion-label>
154-
</ion-item>
155-
</template>
33+
import Item from '@site/static/usage/thumbnail/item/index.md';
15634

157-
<script>
158-
import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
159-
import { defineComponent } from 'vue';
35+
<Item />
16036

161-
export default defineComponent({
162-
components: { IonItem, IonLabel, IonThumbnail }
163-
});
164-
</script>
165-
```
37+
## Theming
16638

167-
</TabItem>
39+
import Theming from '@site/static/usage/thumbnail/theming/index.md';
16840

169-
</Tabs>
41+
<Theming />
17042

17143
## Properties
17244
<Props />
@@ -184,4 +56,4 @@ export default defineComponent({
18456
<CustomProps />
18557

18658
## Slots
187-
<Slots />
59+
<Slots />

‎static/demos/api/skeleton-text/thumbnail.svg

Lines changed: 13 additions & 1 deletion
Loading

‎static/demos/api/thumbnail/thumbnail.svg

Lines changed: 13 additions & 1 deletion
Loading

‎static/usage/thumbnail/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-thumbnail>
3+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
4+
</ion-thumbnail>
5+
```

‎static/usage/thumbnail/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>Thumbnail</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-thumbnail>
20+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
21+
</ion-thumbnail>
22+
</div>
23+
</ion-content>
24+
</ion-app>
25+
</body>
26+
27+
</html>

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

‎static/usage/thumbnail/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-thumbnail>
3+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
4+
</ion-thumbnail>
5+
```

‎static/usage/thumbnail/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 { IonThumbnail } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonThumbnail>
9+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
10+
</IonThumbnail>
11+
</>
12+
);
13+
}
14+
export default Example;
15+
```

‎static/usage/thumbnail/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-thumbnail>
4+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
5+
</ion-thumbnail>
6+
</template>
7+
8+
<script lang="ts">
9+
import { IonThumbnail } from '@ionic/vue';
10+
import { defineComponent } from 'vue';
11+
12+
export default defineComponent({
13+
components: { IonThumbnail },
14+
});
15+
</script>
16+
```

‎static/usage/thumbnail/item/angular.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```html
2+
<ion-item>
3+
<ion-thumbnail slot="start">
4+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
5+
</ion-thumbnail>
6+
<ion-label>Item Thumbnail</ion-label>
7+
</ion-item>
8+
```

‎static/usage/thumbnail/item/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>Thumbnail</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-item>
20+
<ion-thumbnail slot="start">
21+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
22+
</ion-thumbnail>
23+
<ion-label>Item Thumbnail</ion-label>
24+
</ion-item>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
30+
</html>

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

‎static/usage/thumbnail/item/javascript.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```html
2+
<ion-item>
3+
<ion-thumbnail slot="start">
4+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
5+
</ion-thumbnail>
6+
<ion-label>Item Thumbnail</ion-label>
7+
</ion-item>
8+
```

‎static/usage/thumbnail/item/react.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonLabel, IonThumbnail } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonItem>
9+
<IonThumbnail slot="start">
10+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
11+
</IonThumbnail>
12+
<IonLabel>Item Thumbnail</IonLabel>
13+
</IonItem>
14+
</>
15+
);
16+
}
17+
export default Example;
18+
```

‎static/usage/thumbnail/item/vue.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```html
2+
<template>
3+
<ion-item>
4+
<ion-thumbnail slot="start">
5+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
6+
</ion-thumbnail>
7+
<ion-label>Item Thumbnail</ion-label>
8+
</ion-item>
9+
</template>
10+
11+
<script lang="ts">
12+
import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
13+
import { defineComponent } from 'vue';
14+
15+
export default defineComponent({
16+
components: { IonItem, IonLabel, IonThumbnail },
17+
});
18+
</script>
19+
```

‎static/usage/thumbnail/theming/angular.md

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

0 commit comments

Comments
 (0)