diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md index ad0fb4c0eb0..f8e95318870 100644 --- a/docs/developing/keyboard.md +++ b/docs/developing/keyboard.md @@ -2,7 +2,6 @@ title: Keyboard --- -import Codepen from '@components/global/Codepen'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -28,77 +27,9 @@ For a list of accepted values, see the - - -```html - - Username or Email - - - - - Enter a number - - -``` - - - -```html - - Username or Email - - - - - Enter a number - - -``` - - - -```html - - Username or Email - - - - - Enter a number - - -``` - - - -```html - - Username or Email - - - - - Enter a number - - -``` - - -```` +import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md'; - + :::note 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 - - -```html - - Enter search query - - -``` - - - -```html - - Enter search query - - -``` - - - -```html - - Enter search query - - -``` - - - -```html - - Enter search query - - -``` - - -```` +import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md'; - + :::note The `enterkeyhint` attribute is supported on devices running Chrome 77+ and iOS Safari 13.4+. diff --git a/static/usage/v7/keyboard/enterkeyhint/angular.md b/static/usage/v7/keyboard/enterkeyhint/angular.md new file mode 100644 index 00000000000..a5fe24f6d7c --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/angular.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v7/keyboard/enterkeyhint/demo.html b/static/usage/v7/keyboard/enterkeyhint/demo.html new file mode 100644 index 00000000000..139c3fc36e2 --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/demo.html @@ -0,0 +1,33 @@ + + + + + + Keyboard + + + + + + + + + +
+ + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +
+ + + + diff --git a/static/usage/v7/keyboard/enterkeyhint/index.md b/static/usage/v7/keyboard/enterkeyhint/index.md new file mode 100644 index 00000000000..eeadc6869c6 --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/index.md @@ -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'; + + diff --git a/static/usage/v7/keyboard/enterkeyhint/javascript.md b/static/usage/v7/keyboard/enterkeyhint/javascript.md new file mode 100644 index 00000000000..c3ca7469739 --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/javascript.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v7/keyboard/enterkeyhint/react.md b/static/usage/v7/keyboard/enterkeyhint/react.md new file mode 100644 index 00000000000..eb088650737 --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/keyboard/enterkeyhint/vue.md b/static/usage/v7/keyboard/enterkeyhint/vue.md new file mode 100644 index 00000000000..a52b2b90d92 --- /dev/null +++ b/static/usage/v7/keyboard/enterkeyhint/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v7/keyboard/inputmode/angular.md b/static/usage/v7/keyboard/inputmode/angular.md new file mode 100644 index 00000000000..36124635c54 --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/angular.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v7/keyboard/inputmode/demo.html b/static/usage/v7/keyboard/inputmode/demo.html new file mode 100644 index 00000000000..6361438d6db --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/demo.html @@ -0,0 +1,44 @@ + + + + + + Keyboard + + + + + + + + + + + +
+ + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +
+ + + + diff --git a/static/usage/v7/keyboard/inputmode/index.md b/static/usage/v7/keyboard/inputmode/index.md new file mode 100644 index 00000000000..44379c3901a --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/index.md @@ -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'; + + diff --git a/static/usage/v7/keyboard/inputmode/javascript.md b/static/usage/v7/keyboard/inputmode/javascript.md new file mode 100644 index 00000000000..d4be8a190c0 --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/javascript.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v7/keyboard/inputmode/react.md b/static/usage/v7/keyboard/inputmode/react.md new file mode 100644 index 00000000000..5e56f0973bd --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/keyboard/inputmode/vue.md b/static/usage/v7/keyboard/inputmode/vue.md new file mode 100644 index 00000000000..3a65c04b073 --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/vue.md @@ -0,0 +1,34 @@ +```html + + + +```