Skip to content

Commit e517a99

Browse files
averyjohnstonaveryjohnston
authored
feat(keyboard): replace Codepens with playgrounds using modern syntax (#3192)
1 parent 9b2db92 commit e517a99

File tree

13 files changed

+293
-121
lines changed

13 files changed

+293
-121
lines changed

‎docs/developing/keyboard.md

+4-121
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
title: Keyboard
33
---
44

5-
import Codepen from '@components/global/Codepen';
65
import Tabs from '@theme/Tabs';
76
import TabItem from '@theme/TabItem';
87

@@ -28,77 +27,9 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
2827

2928
### Usage
3029

31-
````mdx-code-block
32-
<Tabs
33-
defaultValue="javascript"
34-
groupId="framework"
35-
values={[
36-
{ value: 'javascript', label: 'JavaScript' },
37-
{ value: 'angular', label: 'Angular' },
38-
{ value: 'react', label: 'React' },
39-
{ value: 'vue', label: 'Vue' },
40-
]
41-
}>
42-
<TabItem value="javascript">
43-
44-
```html
45-
<ion-item>
46-
<ion-label>Username or Email</ion-label>
47-
<ion-input inputmode="email"></ion-input>
48-
</ion-item>
49-
50-
<ion-item>
51-
<ion-label>Enter a number</ion-label>
52-
<ion-textarea inputmode="numeric"></ion-textarea>
53-
</ion-item>
54-
```
55-
</TabItem>
56-
<TabItem value="angular">
57-
58-
```html
59-
<ion-item>
60-
<ion-label>Username or Email</ion-label>
61-
<ion-input inputmode="email"></ion-input>
62-
</ion-item>
63-
64-
<ion-item>
65-
<ion-label>Enter a number</ion-label>
66-
<ion-textarea inputmode="numeric"></ion-textarea>
67-
</ion-item>
68-
```
69-
</TabItem>
70-
<TabItem value="react">
71-
72-
```html
73-
<IonItem>
74-
<IonLabel>Username or Email</IonLabel>
75-
<IonInput inputmode="email"></IonInput>
76-
</IonItem>
77-
78-
<IonItem>
79-
<IonLabel>Enter a number</IonLabel>
80-
<IonTextarea inputmode="numeric"></IonTextarea>
81-
</IonItem>
82-
```
83-
</TabItem>
84-
<TabItem value="vue">
85-
86-
```html
87-
<ion-item>
88-
<ion-label>Username or Email</ion-label>
89-
<ion-input inputmode="email"></ion-input>
90-
</ion-item>
91-
92-
<ion-item>
93-
<ion-label>Enter a number</ion-label>
94-
<ion-textarea inputmode="numeric"></ion-textarea>
95-
</ion-item>
96-
```
97-
</TabItem>
98-
</Tabs>
99-
````
30+
import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';
10031

101-
<Codepen user="ionic" slug="abvJVVv" height="400" />
32+
<Inputmode />
10233

10334
:::note
10435
The `inputmode` attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode
@@ -114,57 +45,9 @@ For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev
11445

11546
### Usage
11647

117-
````mdx-code-block
118-
<Tabs
119-
groupId="framework"
120-
defaultValue="javascript"
121-
values={[
122-
{ value: 'javascript', label: 'JavaScript' },
123-
{ value: 'angular', label: 'Angular' },
124-
{ value: 'react', label: 'React' },
125-
{ value: 'vue', label: 'Vue' },
126-
]
127-
}>
128-
<TabItem value="javascript">
129-
130-
```html
131-
<ion-item>
132-
<ion-label>Enter search query</ion-label>
133-
<ion-input enterkeyhint="search" type="search"></ion-input>
134-
</ion-item>
135-
```
136-
</TabItem>
137-
<TabItem value="angular">
138-
139-
```html
140-
<ion-item>
141-
<ion-label>Enter search query</ion-label>
142-
<ion-input enterkeyhint="search" type="search"></ion-input>
143-
</ion-item>
144-
```
145-
</TabItem>
146-
<TabItem value="react">
147-
148-
```html
149-
<IonItem>
150-
<IonLabel>Enter search query</IonLabel>
151-
<IonInput enterkeyhint="search" type="search"></IonInput>
152-
</IonItem>
153-
```
154-
</TabItem>
155-
<TabItem value="vue">
156-
157-
```html
158-
<ion-item>
159-
<ion-label>Enter search query</ion-label>
160-
<ion-input enterkeyhint="search" type="search"></ion-input>
161-
</ion-item>
162-
```
163-
</TabItem>
164-
</Tabs>
165-
````
48+
import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';
16649

167-
<Codepen user="ionic" slug="GRpWyRB" height="350" />
50+
<Enterkeyhint />
16851

16952
:::note
17053
The `enterkeyhint` attribute is supported on devices running Chrome 77+ and iOS Safari 13.4+.

‎static/usage/v7/keyboard/enterkeyhint/angular.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
5+
<code slot="label">enterkeyhint="search"</code>
6+
</ion-input>
7+
</ion-item>
8+
<ion-item>
9+
<ion-input enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
10+
<code slot="label">enterkeyhint="send"</code>
11+
</ion-input>
12+
</ion-item>
13+
</ion-list>
14+
```

‎static/usage/v7/keyboard/enterkeyhint/demo.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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>Keyboard</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+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
20+
<code slot="label">enterkeyhint="search"</code>
21+
</ion-input>
22+
</ion-item>
23+
<ion-item>
24+
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
25+
<code slot="label">enterkeyhint="send"</code>
26+
</ion-input>
27+
</ion-item>
28+
</ion-list>
29+
</div>
30+
</ion-content>
31+
</ion-app>
32+
</body>
33+
</html>

‎static/usage/v7/keyboard/enterkeyhint/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/keyboard/enterkeyhint/demo.html"
17+
/>

‎static/usage/v7/keyboard/enterkeyhint/javascript.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
5+
<code slot="label">enterkeyhint="search"</code>
6+
</ion-input>
7+
</ion-item>
8+
<ion-item>
9+
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
10+
<code slot="label">enterkeyhint="send"</code>
11+
</ion-input>
12+
</ion-item>
13+
</ion-list>
14+
```

‎static/usage/v7/keyboard/enterkeyhint/react.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonList, IonItem, IonInput } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonList>
8+
<IonItem>
9+
<IonInput enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
10+
<code slot="label">enterkeyhint="search"</code>
11+
</IonInput>
12+
</IonItem>
13+
<IonItem>
14+
<IonInput enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
15+
<code slot="label">enterkeyhint="send"</code>
16+
</IonInput>
17+
</IonItem>
18+
</IonList>
19+
);
20+
}
21+
export default Example;
22+
```

‎static/usage/v7/keyboard/enterkeyhint/vue.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
6+
<code slot="label">enterkeyhint="search"</code>
7+
</ion-input>
8+
</ion-item>
9+
<ion-item>
10+
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
11+
<code slot="label">enterkeyhint="send"</code>
12+
</ion-input>
13+
</ion-item>
14+
</ion-list>
15+
</template>
16+
17+
<script lang="ts">
18+
import { IonList, IonItem, IonInput } from '@ionic/vue';
19+
import { defineComponent } from 'vue';
20+
21+
export default defineComponent({
22+
components: {
23+
IonList,
24+
IonItem,
25+
IonInput,
26+
},
27+
});
28+
</script>
29+
```

‎static/usage/v7/keyboard/inputmode/angular.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input inputmode="email" labelPlacement="stacked" placeholder="Enter a username or email address">
5+
<code slot="label">inputmode="email"</code>
6+
</ion-input>
7+
</ion-item>
8+
<ion-item>
9+
<ion-input inputmode="numeric" labelPlacement="stacked" placeholder="Enter an integer">
10+
<code slot="label">inputmode="numeric"</code>
11+
</ion-input>
12+
</ion-item>
13+
<ion-item>
14+
<ion-input inputmode="decimal" labelPlacement="stacked" placeholder="Enter a decimal">
15+
<code slot="label">inputmode="decimal"</code>
16+
</ion-input>
17+
</ion-item>
18+
</ion-list>
19+
```

‎static/usage/v7/keyboard/inputmode/demo.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>Keyboard</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+
ion-list {
14+
min-width: 320px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-list>
24+
<ion-item>
25+
<ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
26+
<code slot="label">inputmode="email"</code>
27+
</ion-input>
28+
</ion-item>
29+
<ion-item>
30+
<ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
31+
<code slot="label">inputmode="numeric"</code>
32+
</ion-input>
33+
</ion-item>
34+
<ion-item>
35+
<ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
36+
<code slot="label">inputmode="decimal"</code>
37+
</ion-input>
38+
</ion-item>
39+
</ion-list>
40+
</div>
41+
</ion-content>
42+
</ion-app>
43+
</body>
44+
</html>

‎static/usage/v7/keyboard/inputmode/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/keyboard/inputmode/demo.html"
17+
/>

‎static/usage/v7/keyboard/inputmode/javascript.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
5+
<code slot="label">inputmode="email"</code>
6+
</ion-input>
7+
</ion-item>
8+
<ion-item>
9+
<ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
10+
<code slot="label">inputmode="numeric"</code>
11+
</ion-input>
12+
</ion-item>
13+
<ion-item>
14+
<ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
15+
<code slot="label">inputmode="decimal"</code>
16+
</ion-input>
17+
</ion-item>
18+
</ion-list>
19+
```

0 commit comments

Comments
 (0)