Skip to content

Commit

Permalink
feat(keyboard): replace Codepens with playgrounds using modern syntax (…
Browse files Browse the repository at this point in the history 
…#3192)
  • Loading branch information
@averyjohnston
averyjohnston committed Oct 13, 2023
1 parent 9b2db92 commit e517a99
Show file tree
Hide file tree
Showing 13 changed files with 293 additions and 121 deletions.
125 changes: 4 additions & 121 deletions docs/developing/keyboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Keyboard
---

import Codepen from '@components/global/Codepen';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

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

### Usage

````mdx-code-block
<Tabs
defaultValue="javascript"
groupId="framework"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]
}>
<TabItem value="javascript">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
<TabItem value="angular">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
<TabItem value="react">
```html
<IonItem>
<IonLabel>Username or Email</IonLabel>
<IonInput inputmode="email"></IonInput>
</IonItem>
<IonItem>
<IonLabel>Enter a number</IonLabel>
<IonTextarea inputmode="numeric"></IonTextarea>
</IonItem>
```
</TabItem>
<TabItem value="vue">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
</Tabs>
````
import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';

<Codepen user="ionic" slug="abvJVVv" height="400" />
<Inputmode />

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

### Usage

````mdx-code-block
<Tabs
groupId="framework"
defaultValue="javascript"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]
}>
<TabItem value="javascript">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
<TabItem value="angular">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
<TabItem value="react">
```html
<IonItem>
<IonLabel>Enter search query</IonLabel>
<IonInput enterkeyhint="search" type="search"></IonInput>
</IonItem>
```
</TabItem>
<TabItem value="vue">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
</Tabs>
````
import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';

<Codepen user="ionic" slug="GRpWyRB" height="350" />
<Enterkeyhint />

:::note
The `enterkeyhint` attribute is supported on devices running Chrome 77+ and iOS Safari 13.4+.
Expand Down
14 changes: 14 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/angular.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```html
<ion-list>
<ion-item>
<ion-input enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
<code slot="label">enterkeyhint="search"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
<code slot="label">enterkeyhint="send"</code>
</ion-input>
</ion-item>
</ion-list>
```
33 changes: 33 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keyboard</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
<code slot="label">enterkeyhint="search"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
<code slot="label">enterkeyhint="send"</code>
</ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
17 changes: 17 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
}}
src="usage/v7/keyboard/enterkeyhint/demo.html"
/>
14 changes: 14 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/javascript.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```html
<ion-list>
<ion-item>
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
<code slot="label">enterkeyhint="search"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
<code slot="label">enterkeyhint="send"</code>
</ion-input>
</ion-item>
</ion-list>
```
22 changes: 22 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/react.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
```tsx
import React from 'react';
import { IonList, IonItem, IonInput } from '@ionic/react';

function Example() {
return (
<IonList>
<IonItem>
<IonInput enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
<code slot="label">enterkeyhint="search"</code>
</IonInput>
</IonItem>
<IonItem>
<IonInput enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
<code slot="label">enterkeyhint="send"</code>
</IonInput>
</IonItem>
</IonList>
);
}
export default Example;
```
29 changes: 29 additions & 0 deletions static/usage/v7/keyboard/enterkeyhint/vue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
```html
<template>
<ion-list>
<ion-item>
<ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
<code slot="label">enterkeyhint="search"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
<code slot="label">enterkeyhint="send"</code>
</ion-input>
</ion-item>
</ion-list>
</template>

<script lang="ts">
import { IonList, IonItem, IonInput } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonList,
IonItem,
IonInput,
},
});
</script>
```
19 changes: 19 additions & 0 deletions static/usage/v7/keyboard/inputmode/angular.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```html
<ion-list>
<ion-item>
<ion-input inputmode="email" labelPlacement="stacked" placeholder="Enter a username or email address">
<code slot="label">inputmode="email"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="numeric" labelPlacement="stacked" placeholder="Enter an integer">
<code slot="label">inputmode="numeric"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="decimal" labelPlacement="stacked" placeholder="Enter a decimal">
<code slot="label">inputmode="decimal"</code>
</ion-input>
</ion-item>
</ion-list>
```
44 changes: 44 additions & 0 deletions static/usage/v7/keyboard/inputmode/demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keyboard</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

<style>
ion-list {
min-width: 320px;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
<code slot="label">inputmode="email"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
<code slot="label">inputmode="numeric"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
<code slot="label">inputmode="decimal"</code>
</ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
17 changes: 17 additions & 0 deletions static/usage/v7/keyboard/inputmode/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
code={{
javascript,
react,
vue,
angular,
}}
src="usage/v7/keyboard/inputmode/demo.html"
/>
19 changes: 19 additions & 0 deletions static/usage/v7/keyboard/inputmode/javascript.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```html
<ion-list>
<ion-item>
<ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
<code slot="label">inputmode="email"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
<code slot="label">inputmode="numeric"</code>
</ion-input>
</ion-item>
<ion-item>
<ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
<code slot="label">inputmode="decimal"</code>
</ion-input>
</ion-item>
</ion-list>
```
Loading

1 comment on commit e517a99

@vercel
Copy link

@vercel vercel bot commented on e517a99 Oct 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app

Please sign in to comment.