Skip to content

Commit b50ae90

Browse files
brandyscarneybrandyscarney
committed
docs(gallery): add columns playground
1 parent 1e8efd6 commit b50ae90

9 files changed

Lines changed: 509 additions & 0 deletions

File tree

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
```css
2+
ion-gallery div {
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
color: #fff;
7+
border-radius: 16px;
8+
}
9+
10+
ion-gallery div:nth-child(1) {
11+
background: #ff6b6b;
12+
}
13+
14+
ion-gallery div:nth-child(2) {
15+
background: #4ecdc4;
16+
}
17+
18+
ion-gallery div:nth-child(3) {
19+
background: #ffe66d;
20+
color: #333;
21+
}
22+
23+
ion-gallery div:nth-child(4) {
24+
background: #5f27cd;
25+
}
26+
27+
ion-gallery div:nth-child(5) {
28+
background: #7f8c8d;
29+
}
30+
31+
ion-gallery div:nth-child(6) {
32+
background: #ff9f43;
33+
}
34+
35+
ion-gallery div:nth-child(7) {
36+
background: #ff3f34;
37+
}
38+
39+
ion-gallery div:nth-child(8) {
40+
background: #2ecc71;
41+
}
42+
43+
ion-gallery div:nth-child(9) {
44+
background: #34495e;
45+
}
46+
47+
ion-gallery div:nth-child(10) {
48+
background: #1abc9c;
49+
}
50+
51+
ion-gallery div:nth-child(11) {
52+
background: #e67e22;
53+
}
54+
55+
ion-gallery div:nth-child(12) {
56+
background: #9b59b6;
57+
}
58+
```

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```html
2+
<ion-gallery [columns]="columns">
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+
<div>7</div>
10+
<div>8</div>
11+
<div>9</div>
12+
<div>10</div>
13+
<div>11</div>
14+
<div>12</div>
15+
</ion-gallery>
16+
```

‎static/usage/v9/gallery/columns/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+
columns = {
13+
xs: 3,
14+
sm: 6,
15+
md: 8,
16+
lg: 9,
17+
xl: 10,
18+
xxl: 12,
19+
};
20+
}
21+
```

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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.6-dev.11777569278.1613db2e/dist/ionic/ionic.esm.js"
12+
></script>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/@ionic/core@8.8.6-dev.11777569278.1613db2e/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+
<div>7</div>
31+
<div>8</div>
32+
<div>9</div>
33+
<div>10</div>
34+
<div>11</div>
35+
<div>12</div>
36+
</ion-gallery>
37+
</div>
38+
</ion-content>
39+
</ion-app>
40+
41+
<script>
42+
const gallery = document.querySelector('ion-gallery');
43+
gallery.columns = {
44+
xs: 3,
45+
sm: 6,
46+
md: 8,
47+
lg: 9,
48+
xl: 10,
49+
xxl: 12,
50+
};
51+
</script>
52+
53+
<style>
54+
/* For demo purposes */
55+
ion-gallery {
56+
width: 100%;
57+
padding: 16px 36px;
58+
}
59+
60+
ion-gallery div {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
color: #fff;
65+
border-radius: 16px;
66+
}
67+
68+
ion-gallery div:nth-child(1) {
69+
background: #ff6b6b;
70+
}
71+
72+
ion-gallery div:nth-child(2) {
73+
background: #4ecdc4;
74+
}
75+
76+
ion-gallery div:nth-child(3) {
77+
background: #ffe66d;
78+
color: #333;
79+
}
80+
81+
ion-gallery div:nth-child(4) {
82+
background: #5f27cd;
83+
}
84+
85+
ion-gallery div:nth-child(5) {
86+
background: #7f8c8d;
87+
}
88+
89+
ion-gallery div:nth-child(6) {
90+
background: #ff9f43;
91+
}
92+
93+
ion-gallery div:nth-child(7) {
94+
background: #ff3f34;
95+
}
96+
97+
ion-gallery div:nth-child(8) {
98+
background: #2ecc71;
99+
}
100+
101+
ion-gallery div:nth-child(9) {
102+
background: #34495e;
103+
}
104+
105+
ion-gallery div:nth-child(10) {
106+
background: #1abc9c;
107+
}
108+
109+
ion-gallery div:nth-child(11) {
110+
background: #e67e22;
111+
}
112+
113+
ion-gallery div:nth-child(12) {
114+
background: #9b59b6;
115+
}
116+
</style>
117+
</body>
118+
</html>

‎static/usage/v9/gallery/columns/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="small"
34+
src="usage/v9/gallery/columns/demo.html"
35+
/>

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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+
<div>7</div>
10+
<div>8</div>
11+
<div>9</div>
12+
<div>10</div>
13+
<div>11</div>
14+
<div>12</div>
15+
</ion-gallery>
16+
17+
<script>
18+
const gallery = document.querySelector('ion-gallery');
19+
gallery.columns = {
20+
xs: 3,
21+
sm: 6,
22+
md: 8,
23+
lg: 9,
24+
xl: 10,
25+
xxl: 12,
26+
};
27+
</script>
28+
29+
<style>
30+
ion-gallery div {
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
color: #fff;
35+
border-radius: 16px;
36+
}
37+
38+
ion-gallery div:nth-child(1) {
39+
background: #ff6b6b;
40+
}
41+
42+
ion-gallery div:nth-child(2) {
43+
background: #4ecdc4;
44+
}
45+
46+
ion-gallery div:nth-child(3) {
47+
background: #ffe66d;
48+
color: #333;
49+
}
50+
51+
ion-gallery div:nth-child(4) {
52+
background: #5f27cd;
53+
}
54+
55+
ion-gallery div:nth-child(5) {
56+
background: #7f8c8d;
57+
}
58+
59+
ion-gallery div:nth-child(6) {
60+
background: #ff9f43;
61+
}
62+
63+
ion-gallery div:nth-child(7) {
64+
background: #ff3f34;
65+
}
66+
67+
ion-gallery div:nth-child(8) {
68+
background: #2ecc71;
69+
}
70+
71+
ion-gallery div:nth-child(9) {
72+
background: #34495e;
73+
}
74+
75+
ion-gallery div:nth-child(10) {
76+
background: #1abc9c;
77+
}
78+
79+
ion-gallery div:nth-child(11) {
80+
background: #e67e22;
81+
}
82+
83+
ion-gallery div:nth-child(12) {
84+
background: #9b59b6;
85+
}
86+
</style>
87+
```

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
```css
2+
ion-gallery div {
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
color: #fff;
7+
border-radius: 16px;
8+
}
9+
10+
ion-gallery div:nth-child(1) {
11+
background: #ff6b6b;
12+
}
13+
14+
ion-gallery div:nth-child(2) {
15+
background: #4ecdc4;
16+
}
17+
18+
ion-gallery div:nth-child(3) {
19+
background: #ffe66d;
20+
color: #333;
21+
}
22+
23+
ion-gallery div:nth-child(4) {
24+
background: #5f27cd;
25+
}
26+
27+
ion-gallery div:nth-child(5) {
28+
background: #7f8c8d;
29+
}
30+
31+
ion-gallery div:nth-child(6) {
32+
background: #ff9f43;
33+
}
34+
35+
ion-gallery div:nth-child(7) {
36+
background: #ff3f34;
37+
}
38+
39+
ion-gallery div:nth-child(8) {
40+
background: #2ecc71;
41+
}
42+
43+
ion-gallery div:nth-child(9) {
44+
background: #34495e;
45+
}
46+
47+
ion-gallery div:nth-child(10) {
48+
background: #1abc9c;
49+
}
50+
51+
ion-gallery div:nth-child(11) {
52+
background: #e67e22;
53+
}
54+
55+
ion-gallery div:nth-child(12) {
56+
background: #9b59b6;
57+
}
58+
```

0 commit comments

Comments
 (0)