Skip to content

Commit 78934cd

Browse files
liamdebeasiliamdebeasi
authored
chore: add playgrounds for JP docs (#3004)
1 parent a3ef3b3 commit 78934cd

File tree

14 files changed

+425
-0
lines changed

14 files changed

+425
-0
lines changed

‎static/usage/v7/datetime/theming/angular/example_component_html.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-datetime color="rose"></ion-datetime>
3+
```

‎static/usage/v7/datetime/theming/angular/global_css.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
```css
2+
/* Core CSS required for Ionic components to work properly */
3+
@import '~@ionic/angular/css/core.css';
4+
5+
/* Basic CSS for apps built with Ionic */
6+
@import '~@ionic/angular/css/normalize.css';
7+
@import '~@ionic/angular/css/structure.css';
8+
@import '~@ionic/angular/css/typography.css';
9+
@import '~@ionic/angular/css/display.css';
10+
11+
/* Optional CSS utils that can be commented out */
12+
@import '~@ionic/angular/css/padding.css';
13+
@import '~@ionic/angular/css/float-elements.css';
14+
@import '~@ionic/angular/css/text-alignment.css';
15+
@import '~@ionic/angular/css/text-transformation.css';
16+
@import '~@ionic/angular/css/flex-utils.css';
17+
18+
:root {
19+
--ion-color-rose: #831843;
20+
--ion-color-rose-rgb: 131, 24, 67;
21+
--ion-color-rose-contrast: #ffffff;
22+
--ion-color-rose-contrast-rgb: 255, 255, 255;
23+
--ion-color-rose-shade: #73153b;
24+
--ion-color-rose-tint: #8f2f56;
25+
26+
--ion-text-color: #881337;
27+
--ion-text-color-rgb: 136, 19, 55;
28+
29+
--ion-color-step-50: #f9e6e9;
30+
--ion-color-step-100: #f3dbdf;
31+
--ion-color-step-150: #edd0d6;
32+
--ion-color-step-200: #e7c5cd;
33+
--ion-color-step-250: #e1bac3;
34+
--ion-color-step-300: #dbaeba;
35+
--ion-color-step-350: #d5a3b1;
36+
--ion-color-step-400: #cf98a7;
37+
--ion-color-step-450: #c98d9e;
38+
--ion-color-step-500: #c48295;
39+
--ion-color-step-550: #be778b;
40+
--ion-color-step-600: #b86c82;
41+
--ion-color-step-650: #b26178;
42+
--ion-color-step-700: #ac566f;
43+
--ion-color-step-750: #a64b66;
44+
--ion-color-step-800: #a03f5c;
45+
--ion-color-step-850: #9a3453;
46+
--ion-color-step-900: #94294a;
47+
--ion-color-step-950: #8e1e40;
48+
}
49+
50+
.ion-color-rose {
51+
--ion-color-base: var(--ion-color-rose);
52+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
53+
--ion-color-contrast: var(--ion-color-rose-contrast);
54+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
55+
--ion-color-shade: var(--ion-color-rose-shade);
56+
--ion-color-tint: var(--ion-color-rose-tint);
57+
}
58+
59+
ion-datetime {
60+
--background: #fff1f2;
61+
--background-rgb: 255, 241, 242;
62+
63+
border-radius: 16px;
64+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
65+
}
66+
```

‎static/usage/v7/datetime/theming/demo.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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>Datetime</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+
<style>
12+
:root,
13+
.ios body.dark,
14+
.md body.dark {
15+
--ion-color-rose: #831843;
16+
--ion-color-rose-rgb: 131, 24, 67;
17+
--ion-color-rose-contrast: #ffffff;
18+
--ion-color-rose-contrast-rgb: 255, 255, 255;
19+
--ion-color-rose-shade: #73153b;
20+
--ion-color-rose-tint: #8f2f56;
21+
22+
--ion-text-color: #881337;
23+
--ion-text-color-rgb: 136, 19, 55;
24+
25+
--ion-color-step-50: #f9e6e9;
26+
--ion-color-step-100: #f3dbdf;
27+
--ion-color-step-150: #edd0d6;
28+
--ion-color-step-200: #e7c5cd;
29+
--ion-color-step-250: #e1bac3;
30+
--ion-color-step-300: #dbaeba;
31+
--ion-color-step-350: #d5a3b1;
32+
--ion-color-step-400: #cf98a7;
33+
--ion-color-step-450: #c98d9e;
34+
--ion-color-step-500: #c48295;
35+
--ion-color-step-550: #be778b;
36+
--ion-color-step-600: #b86c82;
37+
--ion-color-step-650: #b26178;
38+
--ion-color-step-700: #ac566f;
39+
--ion-color-step-750: #a64b66;
40+
--ion-color-step-800: #a03f5c;
41+
--ion-color-step-850: #9a3453;
42+
--ion-color-step-900: #94294a;
43+
--ion-color-step-950: #8e1e40;
44+
}
45+
46+
.ion-color-rose {
47+
--ion-color-base: var(--ion-color-rose);
48+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
49+
--ion-color-contrast: var(--ion-color-rose-contrast);
50+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
51+
--ion-color-shade: var(--ion-color-rose-shade);
52+
--ion-color-tint: var(--ion-color-rose-tint);
53+
}
54+
55+
ion-datetime {
56+
--background: #fff1f2;
57+
--background-rgb: 255, 241, 242;
58+
59+
width: 350px;
60+
61+
border-radius: 16px;
62+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<ion-app>
69+
<ion-content>
70+
<div class="container">
71+
<ion-datetime color="rose"></ion-datetime>
72+
</div>
73+
</ion-content>
74+
</ion-app>
75+
</body>
76+
</html>

‎static/usage/v7/datetime/theming/index.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# TODO FW-4608
2+
3+
import Playground from '@site/src/components/global/Playground';
4+
5+
import javascript from './javascript.md';
6+
7+
import react_main_tsx from './react/main_tsx.md';
8+
import react_main_css from './react/main_css.md';
9+
10+
import vue from './vue.md';
11+
12+
import angular_example_component_html from './angular/example_component_html.md';
13+
import angular_global_css from './angular/global_css.md';
14+
15+
<Playground
16+
version="7"
17+
size="450px"
18+
code={{
19+
javascript,
20+
react: {
21+
files: {
22+
'src/main.tsx': react_main_tsx,
23+
'src/main.css': react_main_css,
24+
},
25+
},
26+
vue,
27+
angular: {
28+
files: {
29+
'src/app/example.component.html': angular_example_component_html,
30+
'src/global.css': angular_global_css,
31+
},
32+
},
33+
}}
34+
src="usage/v7/datetime/theming/demo.html"
35+
/>

‎static/usage/v7/datetime/theming/javascript.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
```html
2+
<ion-datetime color="rose"></ion-datetime>
3+
4+
<style>
5+
:root {
6+
--ion-color-rose: #831843;
7+
--ion-color-rose-rgb: 131, 24, 67;
8+
--ion-color-rose-contrast: #ffffff;
9+
--ion-color-rose-contrast-rgb: 255, 255, 255;
10+
--ion-color-rose-shade: #73153b;
11+
--ion-color-rose-tint: #8f2f56;
12+
13+
--ion-text-color: #881337;
14+
--ion-text-color-rgb: 136, 19, 55;
15+
16+
--ion-color-step-50: #f9e6e9;
17+
--ion-color-step-100: #f3dbdf;
18+
--ion-color-step-150: #edd0d6;
19+
--ion-color-step-200: #e7c5cd;
20+
--ion-color-step-250: #e1bac3;
21+
--ion-color-step-300: #dbaeba;
22+
--ion-color-step-350: #d5a3b1;
23+
--ion-color-step-400: #cf98a7;
24+
--ion-color-step-450: #c98d9e;
25+
--ion-color-step-500: #c48295;
26+
--ion-color-step-550: #be778b;
27+
--ion-color-step-600: #b86c82;
28+
--ion-color-step-650: #b26178;
29+
--ion-color-step-700: #ac566f;
30+
--ion-color-step-750: #a64b66;
31+
--ion-color-step-800: #a03f5c;
32+
--ion-color-step-850: #9a3453;
33+
--ion-color-step-900: #94294a;
34+
--ion-color-step-950: #8e1e40;
35+
}
36+
37+
.ion-color-rose {
38+
--ion-color-base: var(--ion-color-rose);
39+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
40+
--ion-color-contrast: var(--ion-color-rose-contrast);
41+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
42+
--ion-color-shade: var(--ion-color-rose-shade);
43+
--ion-color-tint: var(--ion-color-rose-tint);
44+
}
45+
46+
ion-datetime {
47+
--background: #fff1f2;
48+
--background-rgb: 255, 241, 242;
49+
50+
border-radius: 16px;
51+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
52+
}
53+
</style>
54+
```

‎static/usage/v7/datetime/theming/react/main_css.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
```css
2+
:root {
3+
--ion-color-rose: #831843;
4+
--ion-color-rose-rgb: 131, 24, 67;
5+
--ion-color-rose-contrast: #ffffff;
6+
--ion-color-rose-contrast-rgb: 255, 255, 255;
7+
--ion-color-rose-shade: #73153b;
8+
--ion-color-rose-tint: #8f2f56;
9+
10+
--ion-text-color: #881337;
11+
--ion-text-color-rgb: 136, 19, 55;
12+
13+
--ion-color-step-50: #f9e6e9;
14+
--ion-color-step-100: #f3dbdf;
15+
--ion-color-step-150: #edd0d6;
16+
--ion-color-step-200: #e7c5cd;
17+
--ion-color-step-250: #e1bac3;
18+
--ion-color-step-300: #dbaeba;
19+
--ion-color-step-350: #d5a3b1;
20+
--ion-color-step-400: #cf98a7;
21+
--ion-color-step-450: #c98d9e;
22+
--ion-color-step-500: #c48295;
23+
--ion-color-step-550: #be778b;
24+
--ion-color-step-600: #b86c82;
25+
--ion-color-step-650: #b26178;
26+
--ion-color-step-700: #ac566f;
27+
--ion-color-step-750: #a64b66;
28+
--ion-color-step-800: #a03f5c;
29+
--ion-color-step-850: #9a3453;
30+
--ion-color-step-900: #94294a;
31+
--ion-color-step-950: #8e1e40;
32+
}
33+
34+
.ion-color-rose {
35+
--ion-color-base: var(--ion-color-rose);
36+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
37+
--ion-color-contrast: var(--ion-color-rose-contrast);
38+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
39+
--ion-color-shade: var(--ion-color-rose-shade);
40+
--ion-color-tint: var(--ion-color-rose-tint);
41+
}
42+
43+
ion-datetime {
44+
--background: #fff1f2;
45+
--background-rgb: 255, 241, 242;
46+
47+
border-radius: 16px;
48+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
49+
}
50+
```

‎static/usage/v7/datetime/theming/react/main_tsx.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return <IonDatetime color="rose"></IonDatetime>;
9+
}
10+
export default Example;
11+
```

‎static/usage/v7/datetime/theming/vue.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
```html
2+
<template>
3+
<ion-datetime color="rose"></ion-datetime>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonDatetime } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonDatetime },
12+
});
13+
</script>
14+
15+
<style>
16+
:root {
17+
--ion-color-rose: #831843;
18+
--ion-color-rose-rgb: 131, 24, 67;
19+
--ion-color-rose-contrast: #ffffff;
20+
--ion-color-rose-contrast-rgb: 255, 255, 255;
21+
--ion-color-rose-shade: #73153b;
22+
--ion-color-rose-tint: #8f2f56;
23+
24+
--ion-text-color: #881337;
25+
--ion-text-color-rgb: 136, 19, 55;
26+
27+
--ion-color-step-50: #f9e6e9;
28+
--ion-color-step-100: #f3dbdf;
29+
--ion-color-step-150: #edd0d6;
30+
--ion-color-step-200: #e7c5cd;
31+
--ion-color-step-250: #e1bac3;
32+
--ion-color-step-300: #dbaeba;
33+
--ion-color-step-350: #d5a3b1;
34+
--ion-color-step-400: #cf98a7;
35+
--ion-color-step-450: #c98d9e;
36+
--ion-color-step-500: #c48295;
37+
--ion-color-step-550: #be778b;
38+
--ion-color-step-600: #b86c82;
39+
--ion-color-step-650: #b26178;
40+
--ion-color-step-700: #ac566f;
41+
--ion-color-step-750: #a64b66;
42+
--ion-color-step-800: #a03f5c;
43+
--ion-color-step-850: #9a3453;
44+
--ion-color-step-900: #94294a;
45+
--ion-color-step-950: #8e1e40;
46+
}
47+
48+
.ion-color-rose {
49+
--ion-color-base: var(--ion-color-rose);
50+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
51+
--ion-color-contrast: var(--ion-color-rose-contrast);
52+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
53+
--ion-color-shade: var(--ion-color-rose-shade);
54+
--ion-color-tint: var(--ion-color-rose-tint);
55+
}
56+
57+
ion-datetime {
58+
--background: #fff1f2;
59+
--background-rgb: 255, 241, 242;
60+
61+
border-radius: 16px;
62+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
63+
}
64+
</style>
65+
```

‎static/usage/v7/range/basic/angular.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-range aria-label="Volume"></ion-range>
3+
```

‎static/usage/v7/range/basic/demo.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Range</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+
<style>
12+
ion-range {
13+
max-width: 320px;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<ion-app>
20+
<ion-content>
21+
<div class="container">
22+
<ion-range aria-label="Volume"></ion-range>
23+
</div>
24+
</ion-content>
25+
</ion-app>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)