Skip to content

Commit 9b2db92

Browse files
averyjohnstonaveryjohnston
authored
fix(jp): re-add files for removed playgrounds (#3189)
1 parent c6b74a4 commit 9b2db92

File tree

14 files changed

+409
-0
lines changed

14 files changed

+409
-0
lines changed

Diff for: ‎static/usage/v7/item/theming/input-highlight/angular/example_component_css.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```css
2+
ion-item {
3+
--highlight-height: 2px;
4+
--highlight-color-focused: #43e7f3;
5+
--highlight-color-valid: #6f58d8;
6+
--highlight-color-invalid: #ff46be;
7+
}
8+
```

Diff for: ‎static/usage/v7/item/theming/input-highlight/angular/example_component_html.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```html
2+
<ion-item lines="full" class="item-has-focus ion-touched">
3+
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
4+
<ion-input></ion-input>
5+
</ion-item>
6+
7+
<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
8+
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
9+
<ion-input></ion-input>
10+
</ion-item>
11+
12+
<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
13+
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
14+
<ion-input></ion-input>
15+
</ion-item>
16+
```

Diff for: ‎static/usage/v7/item/theming/input-highlight/demo.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Item</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+
12+
<style>
13+
.container {
14+
display: block;
15+
}
16+
17+
ion-item {
18+
--highlight-height: 2px;
19+
--highlight-color-focused: #43e7f3;
20+
--highlight-color-valid: #6f58d8;
21+
--highlight-color-invalid: #ff46be;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<ion-app>
28+
<ion-content>
29+
<div class="container">
30+
<ion-item lines="full" class="item-has-focus ion-touched">
31+
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
32+
<ion-input></ion-input>
33+
</ion-item>
34+
35+
<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
36+
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
37+
<ion-input></ion-input>
38+
</ion-item>
39+
40+
<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
41+
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
42+
<ion-input></ion-input>
43+
</ion-item>
44+
</div>
45+
</ion-content>
46+
</ion-app>
47+
</body>
48+
</html>

Diff for: ‎static/usage/v7/item/theming/input-highlight/index.md

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

Diff for: ‎static/usage/v7/item/theming/input-highlight/javascript.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```html
2+
<ion-item lines="full" class="item-has-focus ion-touched">
3+
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
4+
<ion-input></ion-input>
5+
</ion-item>
6+
7+
<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
8+
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
9+
<ion-input></ion-input>
10+
</ion-item>
11+
12+
<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
13+
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
14+
<ion-input></ion-input>
15+
</ion-item>
16+
17+
<style>
18+
ion-item {
19+
--highlight-height: 2px;
20+
--highlight-color-focused: #43e7f3;
21+
--highlight-color-valid: #6f58d8;
22+
--highlight-color-invalid: #ff46be;
23+
}
24+
</style>
25+
```

Diff for: ‎static/usage/v7/item/theming/input-highlight/react/main_css.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```css
2+
ion-item {
3+
--highlight-height: 2px;
4+
--highlight-color-focused: #43e7f3;
5+
--highlight-color-valid: #6f58d8;
6+
--highlight-color-invalid: #ff46be;
7+
}
8+
```

Diff for: ‎static/usage/v7/item/theming/input-highlight/react/main_tsx.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonInput, IonItem, IonLabel } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<>
10+
<IonItem lines="full" class="item-has-focus ion-touched">
11+
<IonLabel position="stacked">Custom Input Highlight: Focused</IonLabel>
12+
<IonInput></IonInput>
13+
</IonItem>
14+
15+
<IonItem lines="full" class="item-has-focus ion-touched ion-valid">
16+
<IonLabel position="stacked">Custom Input Highlight: Focused & Valid</IonLabel>
17+
<IonInput></IonInput>
18+
</IonItem>
19+
20+
<IonItem lines="full" class="item-has-focus ion-touched ion-invalid">
21+
<IonLabel position="stacked">Custom Input Highlight: Focused & Invalid</IonLabel>
22+
<IonInput></IonInput>
23+
</IonItem>
24+
</>
25+
);
26+
}
27+
export default Example;
28+
```

Diff for: ‎static/usage/v7/item/theming/input-highlight/vue.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```html
2+
<template>
3+
<ion-item lines="full" class="item-has-focus ion-touched">
4+
<ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
5+
<ion-input></ion-input>
6+
</ion-item>
7+
8+
<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
9+
<ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
10+
<ion-input></ion-input>
11+
</ion-item>
12+
13+
<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
14+
<ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
15+
<ion-input></ion-input>
16+
</ion-item>
17+
</template>
18+
19+
<script lang="ts">
20+
import { IonInput, IonItem, IonLabel } from '@ionic/vue';
21+
import { defineComponent } from 'vue';
22+
export default defineComponent({
23+
components: { IonInput, IonItem, IonLabel },
24+
});
25+
</script>
26+
27+
<style>
28+
ion-item {
29+
--highlight-height: 2px;
30+
--highlight-color-focused: #43e7f3;
31+
--highlight-color-valid: #6f58d8;
32+
--highlight-color-invalid: #ff46be;
33+
}
34+
</style>
35+
```

Diff for: ‎static/usage/v7/label/input/angular.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
<ion-input placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-label position="fixed">Fixed Label</ion-label>
9+
<ion-input placeholder="Enter text"></ion-input>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label position="floating">Floating Label</ion-label>
14+
<ion-input placeholder="Enter text"></ion-input>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label position="stacked">Stacked Label</ion-label>
19+
<ion-input placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>Toggle</ion-label>
24+
<ion-toggle slot="end" checked></ion-toggle>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-checkbox slot="start" checked></ion-checkbox>
29+
<ion-label>Checkbox</ion-label>
30+
</ion-item>
31+
```

Diff for: ‎static/usage/v7/label/input/demo.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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>Label</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+
12+
<style>
13+
.container {
14+
display: block;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-item>
24+
<ion-label>Default Label</ion-label>
25+
<ion-input placeholder="Enter text"></ion-input>
26+
</ion-item>
27+
28+
<ion-item>
29+
<ion-label position="fixed">Fixed Label</ion-label>
30+
<ion-input placeholder="Enter text"></ion-input>
31+
</ion-item>
32+
33+
<ion-item>
34+
<ion-label position="floating">Floating Label</ion-label>
35+
<ion-input placeholder="Enter text"></ion-input>
36+
</ion-item>
37+
38+
<ion-item>
39+
<ion-label position="stacked">Stacked Label</ion-label>
40+
<ion-input placeholder="Enter text"></ion-input>
41+
</ion-item>
42+
43+
<ion-item>
44+
<ion-label>Toggle</ion-label>
45+
<ion-toggle slot="end" checked></ion-toggle>
46+
</ion-item>
47+
48+
<ion-item>
49+
<ion-checkbox slot="start" checked></ion-checkbox>
50+
<ion-label>Checkbox</ion-label>
51+
</ion-item>
52+
</div>
53+
</ion-content>
54+
</ion-app>
55+
</body>
56+
</html>

Diff for: ‎static/usage/v7/label/input/index.md

+8
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 version="7" code={{ javascript, react, vue, angular }} src="usage/v7/label/input/demo.html" size="medium" />

Diff for: ‎static/usage/v7/label/input/javascript.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
<ion-input placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-label position="fixed">Fixed Label</ion-label>
9+
<ion-input placeholder="Enter text"></ion-input>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label position="floating">Floating Label</ion-label>
14+
<ion-input placeholder="Enter text"></ion-input>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label position="stacked">Stacked Label</ion-label>
19+
<ion-input placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>Toggle</ion-label>
24+
<ion-toggle slot="end" checked></ion-toggle>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-checkbox slot="start" checked></ion-checkbox>
29+
<ion-label>Checkbox</ion-label>
30+
</ion-item>
31+
```

Diff for: ‎static/usage/v7/label/input/react.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonItem>
9+
<IonLabel>Default Label</IonLabel>
10+
<IonInput placeholder="Enter text"></IonInput>
11+
</IonItem>
12+
13+
<IonItem>
14+
<IonLabel position="fixed">Fixed Label</IonLabel>
15+
<IonInput placeholder="Enter text"></IonInput>
16+
</IonItem>
17+
18+
<IonItem>
19+
<IonLabel position="floating">Floating Label</IonLabel>
20+
<IonInput placeholder="Enter text"></IonInput>
21+
</IonItem>
22+
23+
<IonItem>
24+
<IonLabel position="stacked">Stacked Label</IonLabel>
25+
<IonInput placeholder="Enter text"></IonInput>
26+
</IonItem>
27+
28+
<IonItem>
29+
<IonLabel>Toggle</IonLabel>
30+
<IonToggle slot="end" checked></IonToggle>
31+
</IonItem>
32+
33+
<IonItem>
34+
<IonCheckbox slot="start" checked></IonCheckbox>
35+
<IonLabel>Checkbox</IonLabel>
36+
</IonItem>
37+
</>
38+
);
39+
}
40+
export default Example;
41+
```

0 commit comments

Comments
 (0)