Skip to content

Commit c289e9f

Browse files
brandyscarneybrandyscarney
committed
docs(gallery): add playground for gap
1 parent f0d4b08 commit c289e9f

10 files changed

Lines changed: 386 additions & 0 deletions

File tree

‎docs/api/gallery.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,16 @@ import Columns from '@site/static/usage/v9/gallery/columns/index.md';
103103

104104
<Columns />
105105

106+
## Gap
107+
108+
Gap can be configured with the `gap` property using either a single value for a fixed gap, or a breakpoint map to change gap across screen sizes.
109+
110+
If no value is provided, or if an invalid value is used, the gallery falls back to its default gap value. The default value is `16px`.
111+
112+
import Gap from '@site/static/usage/v9/gallery/gap/index.md';
113+
114+
<Gap />
115+
106116
## Interfaces
107117

108118
### GalleryBreakpointColumns

‎static/usage/v9/gallery/gap/angular/example_component_css.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
```css
2+
/* These styles are for demonstration only. */
3+
/* They are not required for gallery to work. */
4+
ion-gallery div {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
color: #fff;
9+
border-radius: 16px;
10+
}
11+
12+
ion-gallery div:nth-child(1) {
13+
background: #ff6b6b;
14+
}
15+
16+
ion-gallery div:nth-child(2) {
17+
background: #4ecdc4;
18+
}
19+
20+
ion-gallery div:nth-child(3) {
21+
background: #ffe66d;
22+
color: #333;
23+
}
24+
25+
ion-gallery div:nth-child(4) {
26+
background: #5f27cd;
27+
}
28+
29+
ion-gallery div:nth-child(5) {
30+
background: #7f8c8d;
31+
}
32+
33+
ion-gallery div:nth-child(6) {
34+
background: #ff9f43;
35+
}
36+
```

‎static/usage/v9/gallery/gap/angular/example_component_html.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```html
2+
<ion-gallery [gap]="gap">
3+
<div>1</div>
4+
<div>2</div>
5+
<div>3</div>
6+
<div>4</div>
7+
<div>5</div>
8+
<div>6</div>
9+
</ion-gallery>
10+
```

‎static/usage/v9/gallery/gap/angular/example_component_ts.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonGallery } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonGallery],
10+
})
11+
export class ExampleComponent {
12+
gap = {
13+
xs: '2px',
14+
sm: '4px',
15+
md: '6px',
16+
lg: '8px',
17+
xl: '10px',
18+
xxl: '12px',
19+
};
20+
}
21+
```

‎static/usage/v9/gallery/gap/demo.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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>Gallery</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script
10+
type="module"
11+
src="https://cdn.jsdelivr.net/npm/@ionic/core@8.8.7-dev.11778680417.1f9234bd/dist/ionic/ionic.esm.js"
12+
></script>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/@ionic/core@8.8.7-dev.11778680417.1f9234bd/css/ionic.bundle.css"
16+
/>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content class="ion-padding">
22+
<div class="container">
23+
<ion-gallery>
24+
<div>1</div>
25+
<div>2</div>
26+
<div>3</div>
27+
<div>4</div>
28+
<div>5</div>
29+
<div>6</div>
30+
</ion-gallery>
31+
</div>
32+
</ion-content>
33+
</ion-app>
34+
35+
<script>
36+
const gallery = document.querySelector('ion-gallery');
37+
gallery.gap = {
38+
xs: '2px',
39+
sm: '4px',
40+
md: '6px',
41+
lg: '8px',
42+
xl: '10px',
43+
xxl: '12px',
44+
};
45+
</script>
46+
47+
<style>
48+
/* For demo purposes */
49+
ion-gallery {
50+
width: 100%;
51+
padding: 16px 36px;
52+
}
53+
54+
ion-gallery div {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
color: #fff;
59+
border-radius: 16px;
60+
}
61+
62+
ion-gallery div:nth-child(1) {
63+
background: #ff6b6b;
64+
}
65+
66+
ion-gallery div:nth-child(2) {
67+
background: #4ecdc4;
68+
}
69+
70+
ion-gallery div:nth-child(3) {
71+
background: #ffe66d;
72+
color: #333;
73+
}
74+
75+
ion-gallery div:nth-child(4) {
76+
background: #5f27cd;
77+
}
78+
79+
ion-gallery div:nth-child(5) {
80+
background: #7f8c8d;
81+
}
82+
83+
ion-gallery div:nth-child(6) {
84+
background: #ff9f43;
85+
}
86+
</style>
87+
</body>
88+
</html>

‎static/usage/v9/gallery/gap/index.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
13+
14+
<Playground
15+
version="9"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
},
32+
}}
33+
size="medium"
34+
src="usage/v9/gallery/gap/demo.html"
35+
/>

‎static/usage/v9/gallery/gap/javascript.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
```html
2+
<ion-gallery>
3+
<div>1</div>
4+
<div>2</div>
5+
<div>3</div>
6+
<div>4</div>
7+
<div>5</div>
8+
<div>6</div>
9+
</ion-gallery>
10+
11+
<script>
12+
const gallery = document.querySelector('ion-gallery');
13+
gallery.gap = {
14+
xs: '2px',
15+
sm: '4px',
16+
md: '6px',
17+
lg: '8px',
18+
xl: '10px',
19+
xxl: '12px',
20+
};
21+
</script>
22+
23+
<style>
24+
/* These styles are for demonstration only. */
25+
/* They are not required for gallery to work. */
26+
ion-gallery div {
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
color: #fff;
31+
border-radius: 16px;
32+
}
33+
34+
ion-gallery div:nth-child(1) {
35+
background: #ff6b6b;
36+
}
37+
38+
ion-gallery div:nth-child(2) {
39+
background: #4ecdc4;
40+
}
41+
42+
ion-gallery div:nth-child(3) {
43+
background: #ffe66d;
44+
color: #333;
45+
}
46+
47+
ion-gallery div:nth-child(4) {
48+
background: #5f27cd;
49+
}
50+
51+
ion-gallery div:nth-child(5) {
52+
background: #7f8c8d;
53+
}
54+
55+
ion-gallery div:nth-child(6) {
56+
background: #ff9f43;
57+
}
58+
</style>
59+
```

‎static/usage/v9/gallery/gap/react/main_css.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
```css
2+
/* These styles are for demonstration only. */
3+
/* They are not required for gallery to work. */
4+
ion-gallery div {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
color: #fff;
9+
border-radius: 16px;
10+
}
11+
12+
ion-gallery div:nth-child(1) {
13+
background: #ff6b6b;
14+
}
15+
16+
ion-gallery div:nth-child(2) {
17+
background: #4ecdc4;
18+
}
19+
20+
ion-gallery div:nth-child(3) {
21+
background: #ffe66d;
22+
color: #333;
23+
}
24+
25+
ion-gallery div:nth-child(4) {
26+
background: #5f27cd;
27+
}
28+
29+
ion-gallery div:nth-child(5) {
30+
background: #7f8c8d;
31+
}
32+
33+
ion-gallery div:nth-child(6) {
34+
background: #ff9f43;
35+
}
36+
```

‎static/usage/v9/gallery/gap/react/main_tsx.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonGallery } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<IonGallery
10+
gap={{
11+
xs: '2px',
12+
sm: '4px',
13+
md: '6px',
14+
lg: '8px',
15+
xl: '10px',
16+
xxl: '12px',
17+
}}
18+
>
19+
<div>1</div>
20+
<div>2</div>
21+
<div>3</div>
22+
<div>4</div>
23+
<div>5</div>
24+
<div>6</div>
25+
</IonGallery>
26+
);
27+
}
28+
export default Example;
29+
```

0 commit comments

Comments
 (0)